SoFunction
Updated on 2025-04-13

IOS animation effect source code sorting (particles, snowflakes, flames, rivers, steam)

Learning the magic particle emitter and the animation effect of snowflakes falling is achieved through CAEmitterLayer. This layer can also create animation effects of flames, rivers, and steam, which are often used in game development.

Creating your emitter layer

let rect = CGRect(x: 0.0, y: -70.0, width: , height: 50.0)
let emitter = CAEmitterLayer()
 = ().CGColor
 = rect
 = kCAEmitterLayerRectangle
(emitter)

The code creates a CAEmitterLayer and sets the emitterShape shape.

There are several commonly used emitterShapes:

kCAEmitterLayerPoint: Makes all particles create the emitter position at the same point. This is a great choice for sparks or fireworks, for example, you can create a spark effect by creating all the particles at the same point, making them fly in different directions, and then disappear.

kCAEmitterLayerLine: All particles along the top of the top of the emitter rack. This is the shape of an emitter used for the waterfall effect; water particles appear at the top edge of the waterfall.

kCAEmitterLayerRectangle: Creates particles to pass randomly through a given rectangle area.

Adding an emitter frame

The layer frame is set in front, and the Emitter frame is set in the layer below.

 = CGPoint(x:  * 0.5, y:  * 0.5)
 = 

The code sets the center point of the Emitter is the center point of the layer, and the size is the same as the layer.

[]Creating an emitter cell

Now that you have configured the transmitter's position and size, you can continue to add the cell. Cell is a data model representing a particle source. is a separate class of CAEmitterLayer, because an emitter can contain one or more particles. For example, in a popcorn animation, you can have three different cells representing different states of a popcorn: completely exploded, half exploded and no exploded:

let emitterCell = CAEmitterCell()
 = UIImage(named: "")!.CGImage
 = 20 
 = 3.5 
 = [emitterCell]

The code creates 20 cells every second, each cell has a life cycle of 3.5s, and then some cells will disappear.

[]Controlling your particles

The cell set above will not move, you need to give it an acceleration

 = 10.0
 = 70.0

Set the acceleration of the Cell in the X-axis and Y-axis.

 = 20.0 
// The emission direction of the x-y plane// -M_PI_2 vertical upward = CGFloat(-M_PI_2)

Set the starting speed, and the emission direction is defined by the transmissionLongitude property.

[]Adding randomness to your particles

 = 200.0

Set the random range of actually velocity, the velocity of each particle will be between a random value (20-200) = 180 ~ (20 + 200) = 220. Particles with negative initial velocity do not fly upwards, and once they appear on the screen, they will start floating. Particles with positive speed fly up first and then float.

 = CGFloat(M_PI_2)

Turns out that all the particles you configure to surf the straight rise (π/2 angle) as their appearance. The above line of code represents that each particle randomly selects an emission angle between (-π/2 + π/2) = 180 degrees (-π/2 +π/2) = 0 degrees.

[]Changing particle color

Set your particle color

 = UIColor(red: 0.9, green: 1.0, blue: 1.0, alpha: 1.0).CGColor

You can also set the color RGB range of particles:

 = 0.1
 = 0.1
 = 0.1

Since the maximum RGB is 1.0, red is the value 0.81.0, green: 0.91.0, blue: 0.9~1.0

[]Randomizing particle appearance

The particles before were all the same size, so here is the particles assigned a random size.

 = 0.8 
 = 0.8

Set the particle to be 80% of its original size, with a random range from 0.0 to 1.6.

 = -0.15

The particles shrink by 15% of the volume per second.
Transparency can also be set

 = 0.75 
 = -0.15

Transparency: 0.25~1.0, the transparency per second is reduced by 15%.