IOS uses core animations and particle launchers to implement the dot-hop button method _ios

Source: Internet
Author: User

First put on the effect map, you can see

The following methods are implemented

First, the use of the class

    1. Cakeyframeanimation//Core Animation-Key frame animation
    2. Caemitterlayer//particle emitter (is actually a layer, whose parent class is Calayer)
    3. Caemittercell//particle
    4. PS: The core animation should not say more;
    5. Caemitterlayer and Caemittercell, in fact, can be likened to "cannon" and "shells", should not be difficult to understand;

Second, the direct part of the key code code will have detailed comments

Properties to be owned in 2.1. m

/** Weak type particle emitter *
/@property (nonatomic, weak) Caemitterlayer *emitterlayer;

2.2 initWithFrame: Method

-(Instancetype) initWithFrame: (CGRect) frame {
 self = [super Initwithframe:frame];
 if (self) {
 //Configure particle emitter method
 [self setupemitter];
 return self;

2.3 SetSelected: Method

-(void) setselected: (BOOL) selected {
 [super setselected:selected];
 Start Keyframe animation
 [self keyframeanimation];

In the 2.4 Layoutsubviews method

-(void) layoutsubviews{
 [Super layoutsubviews];
 Set Anchor point
 _emitterlayer.position = for particle emitter 

2.5 Setupemitter Method (configuration of particle emitter method)

-(void) Setup {//particle uses Caemittercell to initialize Caemittercell *emittercell = [Caemittercell Emittercell];
 The name of the particle, = @ "Emittercell" is used when setting the number of jets;
 The life cycle and life cycle range of the particles emittercell.lifetime = 0.7;
 Emittercell.lifetimerange = 0.3;//The range of emission velocity and velocity of the particle emittercell.velocity = 30.00;
 Emittercell.velocityrange = 4.00;
 The scaling ratio of the particle and the range of the scaling Emittercell.scale = 0.1;

 Emittercell.scalerange = 0.02;
 Particle transparency Change range emittercell.alpharange = 0.10;
 The velocity of particle transparency changes in the life cycle emittercell.alphaspeed =-1.0; Set the particle's picture emittercell.contents = (id) [UIImage imagenamed:@ "Sparkle3"].

 Initialize the particle emitter caemitterlayer *layer = [Caemitterlayer layer];
 The name of the particle emitter = @ "Emitterlayer";
 The shape of the particle launcher (which can be imagined as a war when you need to use the shape of the cannon) Layer.emittershape = kcaemitterlayercircle;
 The mode Layer.emittermode = Kcaemitterlayeroutline of the emission of the particle emitter;
 Particles in a particle launcher (cannon to be used) Layer.emittercells = @[emittercell];
 Define how the particle cells are presented to the layer Layer.rendermode = Kcaemitterlayeroldestfirst; Don't trim the edges of layerbounded layer.maskstobounds = NO;
 The relative coordinates of the z axis are set to-1 to allow the particle emitter to layer under self.layer layer.zposition =-1;
 Add layer [Self.layer addsublayer:layer];
_emitterlayer = layer; }

Note: Here's one thing to explain in more detail, CAEmitterCell the properties typically have two parameters: an average and a " Range ", for example:

The life cycle and life cycle range of the particles
 emittercell.lifetime  = 0.7;
 Emittercell.lifetimerange = 0.3;

This is explained by Apple's Official document:

Each layer has its own random number generator, and most of the particle's properties are defined as an average and a range value,

As the velocity of a particle, the value of this property is distributed in the range of: [m-r/2,m + R/2].

And then the formula inside

M: Mean (take the above code and say Yes emitterCell.lifetime )

R: Range Value ( mitterCell.lifetimeRange )

And then we can figure out the scope of the life cycle of the particles above I set up according to the formula [0.7-0.3/2, 0.7+0.3/2]

2.6 Keyframeanimation Method (start Keyframe animation)

-(void) Animation {
 //Create Keyframe animation 
 cakeyframeanimation *animation = [Cakeyframeanimation animationwithkeypath:@] Transform.scale "];
 if (self.selected) {
 animation.values = @[@1.5, @0.8, @1.0,@1.2,@1.0];
 Animation.duration = 0.5;
 Launch of the particle emitter
 [self startfire];
 } else
 animation.values = @[@0.8, @1.0];
 Animation.duration = 0.4;
 Animation mode
 Animation.calculationmode = kcaanimationcubic;
 [Self.imageView.layer addanimation:animation forkey:@ "Transform.scale"];

This code has nothing to say, it should be easy to understand.

2.7 Startfire Method (artillery)

-(void) startfire{
 [Self.emitterlayer setvalue:@1000 forkeypath:@ per second injection] EmitterCells.emitterCell.birthRate "];
 self.emitterLayer.beginTime = Cacurrentmediatime ();
 Execution Stop
 [self performselector: @selector (stopfire) Withobject:nil afterdelay:0.1];

2.8 Stopfire Method (ceasefire)

-(void) Stopfire {
 //0 of the number of jets per second means closing the
 [Self.emitterlayer setvalue:@0 forkeypath:@ " EmitterCells.emitterCell.birthRate "]; 


The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.