CAEmitterLayer 全面介绍及实现各种粒子效果

本文首次发布于 CAEmitterLayer 全面介绍及实现各种粒子效果, 作者余东洋,转载请保留原文链接.

前言

CAEmitterLayer作为CALayer的子类的一个高性能的粒子引擎，被用来创建实时的粒子动画如爆炸、烟雾及火焰等效果。在研究其酷炫效果之前，让我们先探究一下CAEmitterLayer的众多基本属性，以方便我们根据需求设置更多参数。

CAEmitterLayer

CAEmitterLayer看上去像是许多CAEmitterCell的容器，这些CAEmitierCell定义了一个例子效果。你将会为不同的例子效果定义一个或多个CAEmitterCell作为模版，同时CAEmitterLayer负责基于这些模版实例化一个粒子流。一个CAEmitterCell类似于一个CALayer：它有一个contents属性可以定义为一个CGImage，另外还有一些可设置属性控制着表现和行为。

• renderMode：渲染模式，控制着在视觉上粒子图片是如何混合的。

NSString * const kCAEmitterLayerUnordered;
NSString * const kCAEmitterLayerOldestFirst;
NSString * const kCAEmitterLayerOldestLast;
NSString * const kCAEmitterLayerBackToFront;
NSString * const kCAEmitterLayerAdditive;

• emitterMode: 发射模式，这个字段规定了在特定形状上发射的具体形式是什么

kCAEmitterLayerPoints： 点模式，发射器是以点的形势发射粒子。
kCAEmitterLayerOutline：这个模式下整个边框都是发射点，即边框进行发射
kCAEmitterLayerSurface：这个模式下是我们边框包含下的区域进行抛洒
kCAEmitterLayerVolume： 同上

• emitterShape：规定了发射源的形状。

kCAEmitterLayerPoint：点形状，发射源的形状就是一个点，位置在上面position设置的位置
kCAEmitterLayerLine：线形状，发射源的形状是一条线，位置在rect的横向的位于垂直方向中间那条
kCAEmitterLayerRectangle：矩形状，发射源是一个矩形，就是上面生成的那个矩形rect
kCAEmitterLayerCuboid：立体矩形形状，发射源是一个立体矩形，这里要生效的话需要设置z方向的数据，如果不设置就同矩形状
kCAEmitterLayerCircle：圆形形状，发射源是一个圆形，形状为矩形包裹的那个圆，二维的
kCAEmitterLayerSphere：立体圆形，三维的圆形，同样需要设置z方向数据，不设置则通二维一样

• emitterSize：发射源的大小，这个emitterSize结合position构建了发射源的位置及大小的矩形区域rect
• emitterPosition：发射点的位置。
• lifetime：粒子的生命周期。
• velocity：粒子速度。
• scale：粒子缩放比例。
• spin：自旋转速度。
• seed：用于初始化产生的随机数产生的种子。
• emitterCells：CAEmitterCell对象的数组，被用于把粒子投放到layer上

CAEmitterCell:

• 粒子在X.Y.Z三个方向上的加速度。

@property CGFloat xAcceleration;
@property CGFloat yAcceleration;
@property CGFloat zAcceleration;

• 粒子缩放比例、缩放范围及缩放速度。（0.0`1.0）

@property CGFloat scale;
@property CGFloat scaleRange;
@property CGFloat scaleSpeed;

• 粒子自旋转速度及范围：

@property CGFloat spin;
@property CGFloat spinRange;

• 粒子RGB及alpha变化范围、速度。

//范围：
@property float redRange;
@property float greenRange;
@property float blueRange;
@property float alphaRange;
//速度：
@property float redSpeed;
@property float greenSpeed;
@property float blueSpeed;
@property float alphaSpeed;

• emitterCells：子粒子。
• color:指定了一个可以混合图片内容颜色的混合色。
• birthRate:粒子产生系数，默认1.0.
• contents：是个CGImageRef的对象,既粒子要展现的图片；
• emissionRange：值是2π，这意味着例子可以从360度任意位置反射出来。如果指定一个小一些的值，就可以创造出一个圆锥形。
• 指定值在时间线上的变化，例如：alphaSpeed = 0.4，说明粒子每过一秒减小0.4。

火焰效果:

我们用每个contents为五角星图片的粒子来简单实现。

代码实现如下：

    UIView * containView = [[UIView alloc]initWithFrame:self.view.bounds];
    containView.center = self.view.center;
    containView.backgroundColor = self.view.backgroundColor;
    self.containView = containView;
    [self.view addSubview:self.containView];

    CAEmitterLayer *emitter = [CAEmitterLayer layer];
    emitter.frame = self.containView.bounds;
    [self.containView.layer addSublayer:emitter];
    emitter.renderMode = kCAEmitterLayerAdditive;//这会让重叠的地方变得更亮一些。
    emitter.emitterPosition = CGPointMake(emitter.frame.size.width / 2.0, emitter.frame.size.height / 2.0);

    CAEmitterCell *cell = [[CAEmitterCell alloc] init];
    cell.contents = (__bridge id)[UIImage imageNamed:@"star_yellow"].CGImage;
    cell.birthRate = 150;
    cell.lifetime = 5.0;
    cell.color = [UIColor colorWithRed:1 green:0.5 blue:0.1 alpha:1.0].CGColor;
    cell.alphaSpeed = -0.4;
    cell.velocity = 50;
    cell.velocityRange = 50;
    cell.emissionRange = M_PI * 2.0;

    emitter.emitterCells = @[cell];

效果：

瀑布飘洒效果：

大致实现如下：

- (void)setupSubviews
{
    self.layer.backgroundColor = [UIColor blackColor].CGColor;
    // 配置emitter
    [self emiterLayer].renderMode = kCAEmitterLayerAdditive; // 粒子如何混合, 这里是直接重叠
    [self emiterLayer].emitterPosition = CGPointMake(self.frame.size.width, 0); // 发射点的位置
    [self emiterLayer].emitterShape = kCAEmitterLayerPoint;


    NSMutableArray * mArr = @[].mutableCopy;
    int cellCount = 6;
    for (int i = 0; i<cellCount; i++) {
        CAEmitterCell * cell = [self getEmitterCellAction];
        [mArr addObject:cell];
    }
    [self emiterLayer].emitterCells = mArr; // 将粒子组成的数组赋值给CAEmitterLayer的emitterCells属性即可.
}

- (CAEmitterCell *)getEmitterCellAction
{
    CAEmitterCell *cell = [[CAEmitterCell alloc] init];
    //    cell.contents = (__bridge id)[UIImage imageNamed:@"coin"].CGImage; // 粒子中的图片
    cell.contents = (__bridge id _Nullable)([self setRandomColorCircleImageSize:CGSizeMake(20, 20)].CGImage);
    cell.yAcceleration = arc4random_uniform(80);   // 粒子的初始加速度
    cell.xAcceleration = -cell.yAcceleration-10;
    cell.birthRate = 10.f;           // 每秒生成粒子的个数
    cell.lifetime = 6.f;            // 粒子存活时间
    cell.alphaSpeed = -0.1f;        // 粒子消逝的速度
    cell.velocity = 30.f;           // 粒子运动的速度均值
    cell.velocityRange = 100.f;      // 粒子运动的速度扰动范围
    cell.emissionRange = M_PI; // 粒子发射角度, 这里是一个扇形.

//    cell.scale = 0.2;
//    cell.scaleRange = 0.1;
//    cell.scaleSpeed = 0.02;

    CGFloat colorChangeValue  = 50.0f;
    cell.blueRange = colorChangeValue;
    cell.redRange =  colorChangeValue;
    cell.greenRange =  colorChangeValue;

    return cell;
}

当emitterShape发射源形状取值不同时会有不同效果。

• kCAEmitterLayerPoint : 点。

• kCAEmitterLayerLine：线。

<注>可根据更多不同的组合参数设置来实现更多酷炫效果，这里便不再赘诉。

参考链接：

http://www.tuicool.com/articles/INbQJj

http://blog.csdn.net/samuelltk/article/details/10207799

http://www.cnblogs.com/densefog/p/5424155.html

后续：

如果需要demo的话直接关注我然后评论留下你的邮箱就行了哈。

后续有补充我会及时更新的，谢谢您的阅读。