[Core Animation] What do you know about CAEmitterLayer?
Little theory
CAEmitterLayer is a high-performance particle engine designed to create particle animations such as fire, rain, smoke, snow, etc.
CAEmitterLayer is a container for a collection of CAEmitterCell instances that defines a particle effect. You can create one or more CAEmitterCell objects as templates for the different particle types. CAEmitterLayer is responsible for instantiating a stream of particles based on these templates.
And what about emitter layer and cell properties?
CAEmitterLayer properties
The properties of the CAEmitterLayer control the position and shape of the particle system. Properties such as birthRate
, lifetime
, and velocity
duplicate values that are specified on the CAEmitterCell. They work as multipliers. You can speed up or increase the whole particle system using a single value.
Other significant properties:
renderMode
: defines how particle cells are rendered into the layer.preservesDepth
: defines whether a 3D particle system is flattened into a single layer (by default) or can blend with other layers in the 3D space of its container layer.
There are lots of other configurable properties for the CAEmitterLayer which you can examine over here.
CAEmitterCell properties
The properties of CAEmitterCell split into three categories:
- A starting value for a specific attribute of the particle. For example, the
color
property defines a blend color that will be combined with the colors in thecontents
image. - A range by which a value for specific attribute will change from particle to particle. For example, if the
emissionRange
property is set to 2π, particles can be emitted in any direction within a 360-degree radius. If we specify a smaller value, we could create a conical funnel for our particles. - A change over time for a specific value. For example, if we set
alphaSpeed
to -0.1, alpha value of the particle will reduce by 0.1 every second. It also create a fadeout effect for the particles as they leave from the emitter.
The most significant properties are:
contents
: assigns aCGImage
to be used as the image.color
: sets up the color to be applied to each particle.alphaSpeed
: sets up how fast particles should be faded out or in(in seconds), over the lifetime of the cell.birthRate
: sets up how many particles to create every second.lifetime
: sets up how long each particle should live(in seconds).velocity
: sets up the base movement speed for each particle.velocityRange
: sets up amount by which the velocity of the cell can vary.scale
: sets up how large particles should be(1.0 is full size).scaleRange
: sets up amount by which the scale of the cell can vary.spin
: sets up rotational velocity that applied to the cell.spinRange
: sets up amount by which the spin of the cell can vary.
You may notice that each property has Speed and Range counterparts. Speed defines how much the value changes over time. Range defines how much variation there is in the initial value.
There are lots of other configurable properties for the CAEmitterCell which you can examine over here.
Little practice
We are going to create simple macOS applications, which displays a different uses of the CAEmitterLayer.
Example 1: Snow.
And what about programming code?
Example 2: Flame.
Simple code example.
Example 3: Confetti.
Also, you can see programming code.
Example 4: Firework.
Look at the code below.
You can see there are three CAEmitterCell objects. One of this, emitterCell
, is a container for trailCell
and fireworksCell
. CAEmitterCell has a property emitterCells
. It means that cell can have an optional array of sub-cells.
Summary
To sum up, CAEmitterLayer is a layer that emits, animates, and renders a particle system.
CAEmitterLayer defines the position, shape, size and rendering mode of a particle system, but in fact it doesn't define any particles – that's handled by CAEmitterCell. You can create as many emitter cells as you want, then assign them to your emitter layer.
Thanks for reading! I hope this information was useful for you. Please don’t forget to 💚 if you found this article useful.