[Core Animation] What do you know about CAEmitterLayer?

4 min readMay 13, 2018

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 the contents 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 a CGImage 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.

Snow effect

And what about programming code?

Example 2: Flame.

Flame effect

Simple code example.

Example 3: Confetti.

Confetti effect

Also, you can see programming code.

Example 4: Firework.

Firework effect

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.

--

--

Yevhenii Peteliev
Yevhenii Peteliev

Written by Yevhenii Peteliev

Senior Research Engineer in TR&D at MacPaw

Responses (5)