Learn about magical particle emitters and snowflakes falling through the CAEmitterLayer. This layer can also create fire, river and steam animations, often used in game development.

From the original code4app http://www.code4app.com/blog-927904-1776.html

Creating your emitter layer

Let rect = CGRect(x: 0.0, y: -70.0, width: view.bounds.width, height: 50.0)

let emitter = CAEmitterLayer()

emitter.backgroundColor = UIColor.blueColor().CGColor

emitter.frame = rect

emitter.emitterShape = kCAEmitterLayerRectangle

view.layer.addSublayer(emitter)

Copy the code

The code creates the CAEmitterLayer and sets the emission source shape emitterShape.

There are several commonly used EmitterShapes:

  • KCAEmitterLayerPoint: Position where all particles create emitters at the same point. This is a good 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: The top of all particles along the top of the launcher. This is the shape of an emitter for the waterfall effect; Water particles appear at the top edge of the waterfall.

  • KCAEmitterLayerRectangle: Creates particles randomly across a given rectangular region.

Adding an emitter frame

I’m going to set a Layer Frame, and I’m going to set an Emitter Frame inside the layer

EmitterPosition = CGPoint(x: rect.width * 0.5, y: rect.height * 0.5)

emitter.emitterSize = rect.size

Copy the code

The code sets the center of the Emitter to be the same size as the center of the layer.

[]Creating an emitter cell

Now that you have configured the emitter location and size, you can continue adding cells. A Cell is a data model that represents a particle source. CAEmitterLayer is a separate class because an emitter can contain one or more particles. For example, in a popcorn animation, you can have three different cells representing the different states of a popcorn: fully popped, half-popped, and unpopped:

let emitterCell = CAEmitterCell()

emitterCell.contents = UIImage(named: "flake.png")! .CGImage



emitterCell.birthRate = 20 

EmitterCell. Lifetime = 3.5

emitter.emitterCells = [emitterCell]

Copy the code

The code creates 20 cells every second, and each cell has a 3.5-second lifetime, after which some cells disappear

[]Controlling your particles

The cell above is not moving, so it needs to be accelerated

EmitterCell. XAcceleration = 10.0

EmitterCell. YAcceleration = 70.0

Copy the code

Set the Cell’s acceleration on the X and Y axes.

EmitterCell. Velocity = 20.0

// The emission direction of the x-y plane

// -M_PI_2 is vertical

emitterCell.emissionLongitude = CGFloat(-M_PI_2)

Copy the code

Set the initial velocity, and the direction of launch is defined by the emissionLongitude property.

[]Adding randomness to your particles

EmitterCell. VelocityRange = 200.0

Copy the code

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

emitterCell.emissionRange = CGFloat(M_PI_2)

Copy the code

It turns out that all the particles you configure emit straight up (PI / 2 Angle) as they appear. The above line of code represents each particle at a random emission Angle between (-π/2 +π/2) = 180 degrees (-π/2 +π/2) = 0 degrees.

[]Changing particle color

Set your particle color

Emittercell.color = UIColor(red: 0.9, green: 1.0, blue: 1.0, alpha: 1.0).cgcolor

Copy the code

You can also set the particle color RGB range:

EmitterCell. RedRange = 0.1

EmitterCell. GreenRange = 0.1

EmitterCell. BlueRange = 0.1

Copy the code

The maximum RGB value is 1.0, so red is 0.81.0, green is 0.91.0, blue is 0.9~1.0

[]Randomizing particle appearance

All the particles before were the same size, and here we assign the particles a random size.

EmitterCell. Scale = 0.8

EmitterCell. ScaleRange = 0.8

Copy the code

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

EmitterCell scaleSpeed = 0.15

Copy the code

Particles shrink by 15% per second.

You can also set transparency

EmitterCell. AlphaRange = 0.75

EmitterCell alphaSpeed = 0.15

Copy the code

Transparency 0.25~1.0, 15% reduction in transparency per second.