SoFunction
Updated on 2025-04-12

IOS Particle System (CAEmitterLayer) Example Detailed Explanation

1. Systematic analysis

In UIKit, the particle system consists of two parts:

·         One or more CAEmitterCells: The emitter battery can be regarded as a prototype of a single particle (e.g., a single puff over a cloud of smoke). When a particle is emitted, UIKit creates a random particle based on this emitted particle and definition. This prototype includes some properties to control the particle's picture, color, orientation, motion, scaling, and life cycle.

·          One or more CAEmitterLayers, but usually only one: This emitted layer mainly controls the shape of the particle (e.g., a point, rectangle or circle) and the position of the emission (e.g., within a rectangle, or edge). This layer has a global multiplier that can be applied to CAEmitterCells within the system. These give you an easy way to cover all the changes in particles. For example, an artificial example will change the speed of x-rain to simulate the wind.

The basis is simple, but these parameters are quite subtle. CAEmitterLayer has over 30 different parameters for customizing the behavior of particles. Below, I'll find some special questions

2. Unpredictability

1. What makes a particle system a random system?

The CAEmitterCell property generally has two parameters: a mean and a "cone", such as velocity and velocityRange.

By default, this "cone" is 0, which assumes that all particles will have the same speed. By changing this "cone", each emitted particle will be randomly perturbed to obtain a value within the range of this "cone". This is explained in Apple's official document CAEmitterLayer documentation:

Each layer has its ownrandom number generator state. Emitter cell properties that are defined as amean and a range, such as a cell's speed, the value of the properties areuniformly distributed in the interval [M - R/2, M + R/2].

2. The direction of launch

CAEmitterCells has a velocity property, which means the speed in the sending direction. In fact, the direction of this emission is defined by the emissionLongitude property. Apple explained this:

The emission longitude is theorientation of the emission angle in the xy-plane. it is also often referred toas the azimuth.

3. Code

- (void)viewDidLoad 
{ 
 [super viewDidLoad]; 
 
 CAEmitterLayer *emitterLayer = [CAEmitterLayer layer]; 
  = ; 
 _emitterLayer = emitterLayer; 
 [ addSublayer:emitterLayer]; 
  
 CAEmitterCell *funnyEmitterCell = [CAEmitterCell emitterCell]; 
  = (id)[UIImage imageNamed:@""].CGImage; 
  = 10.0; 
  = 200.0; 
  = 5.0; 
  = 0.1; 
  = @"funny"; 
  = [NSArray arrayWithObject:funnyEmitterCell]; 
 [self bumpAngle]; 
  
 UILabel *angleLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 20, 100, 30)]; 
  = [UIColor clearColor]; 
 [ addSubview:angleLabel]; 
 _angleLabel = angleLabel; 
} 
 
- (void) bumpAngle { 
 NSNumber *emissionLongitude = [_emitterLayer valueForKeyPath:@""]; 
 NSNumber *nextLongitude = [NSNumber numberWithFloat:[emissionLongitude floatValue] + 0.02]; 
 [_emitterLayer setValue:nextLongitude forKeyPath:@""]; 
 _angleLabel.text = [NSString stringWithFormat:@"%.0f degrees", [nextLongitude floatValue] * 180 / M_PI]; 
 [self performSelector:@selector(bumpAngle) withObject:nil afterDelay:0.1]; 
} 
  

Code Settings/Structure Description:

1、CAEmitterCell

CAEmitterCell *effectCell = [CAEmitterCell emitterCell];

effectCell several important properties:

1).birthRate As the name suggests, there will be no effectCell. This must be set. The specific meaning is the number of effectCells generated by a certain point per second.

2).lifetime & lifetimeRange represents the life cycle of the effectCell, which is how long it will be displayed on the screen.

3).contents This is the same as CALayer, and is only used to set pictures

4).name This is used to identify when the effectCell exists in caeEmitter emitterCells. It is more useful to use setValue forKeyPath

5).velocity & velocityRange & emissionRange indicates the speed at which the cell flies to the right side of the screen & in what range to fly to the right side & +-angle diffuse

6). Make the cell into an array and put it in. There is a very good effect. The one that can become popular is kCAEmitterLayerAdditive

property:

alphaRange: The range in which the color alpha of a particle can change;

alphaSpeed: the speed at which particle transparency changes over the life cycle;

birthrate: the velocity multiplier factor of particle parameters;

blueRange: The color of a particle blue can change the range;

blueSpeed: The speed at which particle blue changes during its lifetime;

color: the color of particles

contents: is an object of CGImageRef, which is the image to which the particles want to display;

contentsRect: The sub rectangle that should be drawn in contents:

emissionLatitude: the angle of the z-axis direction of the emission

emissionLongitude: The emission direction of the x-y plane

emissionRange; surrounding emission angle

emitterCells: Particles emitted by particles

enabled: Whether the particles are rendered

greenrange: The color green of a particle can change the range;

greenSpeed: The rate at which particle green changes during its life cycle;

lifetime: life cycle

lifetimeRange: Lifetime Range

magnificationFilter: Not very clear as if it is increasing its size

minificatonFilter: Reduce its own size

minificationFilterBias: Factors that reduce size

name: the name of the particle

redRange: The range that a particle's color red can change;

redSpeed; the rate of change of particles red during their lifetime;

scale: Scale:

scaleRange: scale range;

scaleSpeed: Scale Speed:

spin: sub-rotation angle

spinrange: sub-rotation angle range

Style: Not very clear:

velocity: speed

velocityRange: Speed ​​range

xAcceleration: acceleration component in x direction of particle

yAcceleration: acceleration component in the y direction of the particle

zAcceleration: Acceleration component in the z-direction of particles

2、CAEmitterLayer

CAEmitterLayer provides a particle emission system based on Core Animation, and particles are initialized with CAEmitterCell. Particles are drawn on the background layer box border

Attributes:

birthRate: particle generation coefficient, default is 1.0;

emitterCells: an array containing CAEmitterCell objects, which are used to place particles on the layer;

emitterDepth: Determine the depth connection of particle shape: emittershape

emitterMode:Emitter Mode

NSString * const kCAEmitterLayerPoints;

NSString * const kCAEmitterLayerOutline;

NSString * const kCAEmitterLayerSurface;

NSString * const kCAEmitterLayerVolume;

emitterPosition:Emitter Position

emitterShape: The shape of the emitter source:

NSString * const kCAEmitterLayerPoint;

NSString * const kCAEmitterLayerLine;

NSString * const kCAEmitterLayerRectangle;

NSString * const kCAEmitterLayerCuboid;

NSString * const kCAEmitterLayerCircle;

NSString * const kCAEmitterLayerSphere;

emitterSize: The size of the emitter source is large;

emitterZposition: the z-coordinate position of the emission source;

lifetime: particle life cycle

preservesDepth: Not many are very clear (particles are flat on the layer)

renderMode: Render Mode:

NSString * const kCAEmitterLayerUnordered;

NSString * const kCAEmitterLayerOldestFirst;

NSString * const kCAEmitterLayerOldestLast;

NSString * const kCAEmitterLayerBackToFront;

NSString * const kCAEmitterLayerAdditive;

scale: particle scaling ratio:

seed: used to initialize the seed generated by random numbers

spin:Spin speed

velocity: particle velocity

4. Demo download

The above is a compilation of the information on the IOS particle system. We will continue to add relevant information in the future. Thank you for your support to this site!