First, let’s take a look at the classes and apis commonly used for particle animation

Emission source: CAEmitterLayer

Initialize the

CAEmitterLayer *colorBallLayer = [CAEmitterLayer layer];

Commonly used attributes

EmitterSize: Size of the particle emitter

EmitterShape: Shape of the particle emitter

KCAEmitterLayerPoint: point

Line kCAEmitterLayerLine:

KCAEmitterLayerRectangle: rectangle

KCAEmitterLayerCuboid: 3D cube

KCAEmitterLayerCircle: round

KCAEmitterLayerSphere: 3 d ball

EmitterMode: indicates the emission mode

KCAEmitterLayerPoints: Launches from the vertex

KCAEmitterLayerOutline: Emits from the outline

KCAEmitterLayerSurface: Launches from the surface

KCAEmitterLayerVolume: 3D graphics for internal emission

EmitterPosition: The center point of the emitter

Particles: CAEmitterCell

Initialize the

CAEmitterCell * colorBallCell = [CAEmitterCell emitterCell]

Common attributes:

BirthRate: Particle generation rate, the larger the more particles

Lifetime: The lifetime of a particle, i.e. how long you expect to live

Velocity: The velocity of a particle

VelocityRange: average amount of particle velocity

YAcceleration: the acceleration component in the Y direction, which is set to >0 if you want to shoot it in the Y direction

XAcceleration: the acceleration component in the X direction

ZAcceleration: The acceleration component in the Z direction

Scale: scale

ScaleRange: scaleRange

ScaleSpeed: Scaling speed during the life cycle

Contents: The contents of the particle. You can set the boarding image with this property

Color: particle color

RedRange: Range of red values for particles

GreenRange: range of the green value of a particle

BlueRange: Range of blue values for particles

AlphaRange: Range of particle transparency

Set the CAEmitterLayer with the emitterCells property to the CAEmitterLayer CAEmitterCell, which is an array

colorBallLayer.emitterCells = @[colorBallCell];

Second, through particle animation wechat send happy birthday cake animation

Create CAEmitterLayer

CAEmitterLayer *birthLayer = [CAEmitterLayer layer];

[self.view.layer addSublayer:birthLayer];
Copy the code

Set emitterSize to the full screen width

birthLayer.emitterSize = CGSizeMake(**self**.view.frame.size.width, 0);
Copy the code

Set emitterShape to make it clear that the emitter is a line above

birthLayer.emitterShape = kCAEmitterLayerLine;
Copy the code

Set emitterMode to fire from profile

birthLayer.emitterMode = kCAEmitterLayerOutline;
Copy the code

Set the emitterPosition

birthLayer.emitterPosition = CGPointMake(self.view.frame.size.width / 2, -20);
Copy the code

Create the CAEmitterCell and set the properties

CAEmitterCell *cell = [CAEmitterCell emitterCell]; Cell. The birthRate = 2.0; cell.lifetime = 10.f; cell.velocity = 20.f; cell.velocityRange = 30.f; cell.yAcceleration = 50.f; Cell. Scale = 0.3; cell.emissionRange = 10; cell.contents = (**id**)[UIImage imageNamed:@"dangao"].CGImage;Copy the code

Add the cell

birthLayer.emitterCells = @[cell];
Copy the code

Three, through particle animation to achieve the following thumbs-up effect

Rewrite UIButton’s initWithFrame method and add particles

- (void)setupExplosion { CAEmitterLayer *explosionLayer = [CAEmitterLayer layer]; [self.layer addSublayer:explosionLayer]; self.explosionLayer = explosionLayer; explosionLayer.emitterSize = CGSizeMake(self.bounds.size.width + 40, self.bounds.size.height + 40); explosionLayer.emitterShape = kCAEmitterLayerCircle; explosionLayer.emitterMode = kCAEmitterLayerOutline; explosionLayer.renderMode = kCAEmitterLayerOldestFirst; CAEmitterCell *explosionCell = [CAEmitterCell emitterCell]; explosionCell.name = @"explosionCell";; explosionCell.alphaSpeed = -1.f; ExplosionCell. AlphaRange = 0.1; Lifetime = 1; // Lifecycle explosionCell.lifetime = 1; / / life cycle range explosionCell. LifetimeRange = 0.1; // Particle velocity explosionCell.velocity = 40.f; / / particle velocity range explosionCell. VelocityRange = 10. F. // Scale explosionCell.scale = 0.08; // Range explosionCell.scaleRange = 0.02; // Image explosionCell.contents = (id)[[UIImage imageNamed:@"spark_red"] CGImage]; explosionLayer.emitterCells = @[explosionCell]; }Copy the code

Override the setSelected method to add the zoom animation and set the particle effect

- (void)setSelected:(**BOOL**)selected { [super setSelected:selected]; CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"]; If (selected) {animation. Values = @ [@ 1.5, @ 2.0, @ 0.8, @ 1.0]; Animation. Duration = 0.5; animation.calculationMode = kCAAnimationCubic; [self.layer addAnimation:animation forKey:nil]; [self performSelector: @selector(startAnimation) withObject:nil afterDelay:0.25]; } else { [self stopAnimation]; }} - (void)startAnimation {// Use KVC to set the number of particles [self.explosionLayer setValue:@1000 forKeyPath:@"emitterCells.explosionCell.birthRate"]; / / animation self. ExplosionLayer. BeginTime = CACurrentMediaTime (); // delay stopAnimation [selformselector: @selector(stopAnimation) withObject:nil afterDelay:0.15]; } - (void)stopAnimation {// Use KVC to set the number of particles [self.explosionLayer setValue:@0 forKeyPath:@"emitterCells.explosionCell.birthRate"]; // Remove animations [self.explosionLayer removeAllAnimations]; }Copy the code