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

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 = Self.imageView.center 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.name = @ "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"].

 Cgimage;
 Initialize the particle emitter caemitterlayer *layer = [Caemitterlayer layer];
 The name of the particle emitter layer.name = @ "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{
 //80
 [Self.emitterlayer setvalue:@1000 forkeypath:@ per second injection] EmitterCells.emitterCell.birthRate "];
 Start
 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 "]; 
}

Summarize

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.