Waterfall, fire, smoke, and rain effects all involve a large number of particles — they share common physical characteristics, but also have their own unique size, orientation, rotation, and trajectory.

Particles are great for creating realistic effects because each particle can be random and unpredictable. For example, each raindrop in a storm may have a unique size, shape, and speed.

The iOS particle system has the following common emission types:
1. Point shape

The emitter shape of kCAEmitterLayerPoint causes all particles to be created at the same point. This is a good choice for effects involving fireworks. We can create fireworks effects by creating particles at the same point and flying them in different directions before they disappear.

2. Line shape

This is a emitter shape for waterfall effects; Water particles appear at the top edge of the waterfall and cascade down:

3. Rectangle shape

The emitter shape of kCAEmitterLayerRectangle creates particles randomly from the given rectangular region:

This emitter shape is ideal for many different effects, such as bubbles in carbonated drinks.

In addition to the above types, there are cuboid, Circle and Sphere emission types. For more information, please refer to related resources.

Particle Emitters related attribute Settings:
1. Adding an emitter frame
 emitter.emitterPosition = CGPoint(x: rect.width/2, y: rect.height/2)
 emitter.emitterSize = rect.size
Copy the code

Define the emitter frame with shape, position, and size attributes. Here, you can set the emitter position to the center of the layer and set the emitter size to equal the size of the layer. like so:

2. Creating an emitter cell

An Emitter cell is a data model that represents a particle source. It is a different class from CAEmitterLayer. A single Emitter layer can contain one or more cells.

For example, in a popcorn animation, there can be three different cells to represent the different states of the popcorn kernel: full burst, half burst, and those stubbornly unburst:

Particle emitters example:

3. Controlling your particles
    // add a little acceleration inThe y - direction so the particles will drift downwards like real snow. EmitterCell. YAcceleration = 70.0 / / snow fl akes should be movinginA downward diagonal direction emitterCell. XAcceleration = 10.0 emitterCell. Velocity = 20.0 emitterCell. EmissionLongitude =. PI * - 0.5Copy the code

The emissionLongitude longitude is the initial Angle of the particle, and the velocity parameter sets the initial velocity of the particle, as shown below:

4. Adding randomness to your particles

Set the emitter random range:

EmitterCell. VelocityRange = 200.0Copy the code

The velocity of each particle will be a random value between (20-200) = -180 and (20 + 200). Particles with negative initial velocities don’t rise at all, and as soon as they appear on the screen, they start moving down. Particles with positive velocity will move first up and then down.

EmitterCell. EmissionRange =. PI * 0.5Copy the code

Make sure that all particles are emitted directly upwards at a – PI / 2 Angle when they appear. The code above instructs the emitter to pick a random Angle for each particle within the range (-π/ 2 -π/ 2) = 180 degrees and (-π/ 2 +π/ 2) = 0 degrees, as shown below:

5. Changing particle color
Emittercell. color = UIColor(red: 0.9, green: 1.0, blue: 1.0, alpha: RedRange = 0.3 emitterCell. GreenRange = 0.3 emitterCell. BlueRange = 0.3Copy the code

The green and blue component values are now random between 0.7 and 1.3, however, the upper limit for values above 1.0 is 1.0, so the effective range is 0.7 to 1.0. The red component, because its “normal” value is 0.9, has an upper limit between 0.6 and 1.0. These are relatively narrow ranges, so the resulting random colors don’t look very different.

6. Randomizing particle appearance
Emittercell. scale = 0.8 emitterCell.scaleRange = 0.8Copy the code

This can produce snowflakes as large as 1.6 times their original size and as small as zero.

EmitterCell scaleSpeed = 0.15Copy the code

Indicates that particles shrink at a rate of 15% per second. Snowflakes get smaller and smaller as they approach the bottom half of the screen. This is a nice effect.

EmitterCell. AlphaRange = 0.75 emitterCell. AlphaSpeed = -0.15Copy the code

Set a wide alpha range from 0.25 to 1.0. AlphaSpeed is very similar to scaleSpeed in that it changes the alpha value of the particle over time.

7. Adding some final polish
emitterCell.emissionLongitude = -.pi
Copy the code

The emissionLongitude is the starting Angle for emission particles. Changing the initial Angle to -.pi will give the snowflake the effect of being blown by the wind.

Appendix: Main code:
    // creates a new CAEmitterLayer, sets the layers’ frame to take up the full width of the screen and positions the layer near the top of the screen.
    letRect = CGRect(x: 0.0, y: -70.0, width: view.bounds.width, height: 50.0)let emitter = CAEmitterLayer()
    emitter.frame = rect
    view.layer.addSublayer(emitter)
    
    // The shape of your emitter generally affects the area where new particles are being created
    emitter.emitterShape = kCAEmitterLayerRectangle
    
    emitter.emitterPosition = CGPoint(x: rect.width/2, y: rect.height/2)
    emitter.emitterSize = rect.size
    
    // create a new cell and set flake.png as its contents. The contents property holds the template from which new particles will be created.
    let emitterCell = CAEmitterCell()
    emitterCell.contents = UIImage(named: "flake.png")? CgImage // Create 20 snowflakes per second and hold them on the screen for 3.5 seconds. That means there will be 70 snowflakes on the screen at any given time except for the first few seconds of the animation. Emittercell. birthRate = 20 Emittercell. lifetime = 3.5 // Add a little accelerationinThe y - direction so the particles will drift downwards like real snow. EmitterCell. YAcceleration = 70.0 / / snow fl akes should be movinginA downward diagonal direction emitterCell. XAcceleration = 10.0 emitterCell. Velocity = 20.0 emitterCell. EmissionLongitude =. PI * 0.5 emitterCell. VelocityRange = 200.0 emitterCell. EmissionRange =. PI * 0.5 emitterCell. Color = UIColor (red: 0.9, Green: 1.0, Blue: 1.0, alpha: RedRange = 0.1 emitterCell.greenrange = 0.1 emitterCell.bluerange = 0.1 emitterCell.scale = 0.8 ScaleRange = 0.8 emitterCell.scaleSpeed = -0.15// The scaleSpeed property above instructs your Particles to Scale down by 15% of their original size per second emitterCell. AlphaRange = 0.75 emitterCell. AlphaSpeed = -0.15 EmitterCell. EmissionLongitude = -. Because PI / / emitterCell. Lifetime = 3.5, LifetimeRange = 1.0 sets the lifetime of each snow to a random value between 2.5 and 4.5 seconds. EmitterCell. LifetimeRange = 1.0 / / cell# 2
    let cell2 = CAEmitterCell()
    cell2.contents = UIImage(named: "flake2.png")? .cgImage cell2.birthRate = 50 cell2.lifetime = 2.5 cell2.lifetimeRange = 1.0 cell2.yAcceleration = 50 cell2.xAcceleration = 50 cell2.velocity = 80 cell2.emissionLongitude = .pi cell2.velocityRange = 20 cell2.emissionRange =.pi * 0.25 cell2.scale = 0.8 cell2.scaleRange = 0.2 cell2.scaleSpeed = -0.1 cell2.alphaRange = 0.35 cell2.alphaSpeed = -0.15 cell2.spin =.pi cell2.spinRange =.pi //cell# 3
    let cell3 = CAEmitterCell()
    cell3.contents = UIImage(named: "flake3.png")? .cgImage cell3.birthRate = 20 cell3.lifetime = 7.5 cell3.lifetimeRange = 1.0 cell3.yAcceleration = 20 cell3.xAcceleration = 10 cell3.velocity = 40 cell3.emissionLongitude = .pi cell3.velocityRange = 50 cell3.emissionRange =.pi * 0.25 cell3.scale = 0.8 cell3.scaleRange = 0.2 cell3.scaleSpeed = -0.05 cell3.alphaRange = 0.5 cell3.alphaSpeed = EmitterCells = [emitterCell, cell2, cell3]Copy the code

Download the demo