CAEmitterLayer 粒子动画

最近有点时间，研究了一下CAEmitterLayer粒子动画效果，分享出来，以备自己以后使用，先看一下基本的效果吧：

CAEmitterLayer.gif

首先，说一下CALayer 经常使用到的一些类

CALayer.png
然后说一下管理CALayer内容的几个函数

addSublayer: 添加子图层
removeFromSuperlayer将自己从父图层中移除
insertSublayer:atIndex:在自己子图层数组中的第idx位置添加图层
insertSublayer:above: 将图层layer添加在子图层的上面
insertSublayer:below: 将图层layer添加在子图层的下面
replaceSublayer:with: 将图层layer替换另一个layer

CALayer的动画操作

addAnimation:forKey: 增加某一属性的动画
animationForKey:获取某一属性的动画
removeAllAnimations移除所有动画
removeAnimationForKey:移除某一属性的动画
animationKeys获取所有的属性动画

CALayer就介绍到这里，想要了解更多的，请点我。

今天主要介绍一下CAEmitterLayer
CAEmitterLayer是CALayer的一个子类，CAEmitterLayer是用于实现基于Core Animation的粒子发生器系统,可以用来做一些酷炫的效果，比如我的demo里面的都是用CAEmitterLayer做的一些效果。

说道CAEmitterLayer，我们不得不提到的就是CAEmitterCell ， 刚才我们说CAEmitterLayer是粒子发生器系统，那么CAEmitterCell就是我们具体发射的粒子了；粒子动画原理其实挺简单的，就是我们需要了解他的一些属性，做出一些效果来，比如红包雨这个动画，代码如下：

- (void)createRedPacketSuperView:(UIView *)superView {
    //设置EmitterLayer
    CAEmitterLayer *redPacketLayer = [CAEmitterLayer layer];
    [superView.layer addSublayer:redPacketLayer];
    self.emitterlayer = redPacketLayer;
    redPacketLayer.emitterShape = kCAEmitterLayerLine;// 发射源的形状
    redPacketLayer.emitterMode = kCAEmitterLayerSurface;//发射模式
    redPacketLayer.emitterSize = superView.frame.size;//发射源的size 决定了发射源的大小
    redPacketLayer.emitterPosition = CGPointMake(superView.frame.size.width * 0.5, superView.frame.origin.y);//发射源的位置
    redPacketLayer.birthRate = 0.0f; // 每秒产生的粒子数量的系数
    //配置EmitterCell
    CAEmitterCell *emitterCell = [CAEmitterCell emitterCell];
    NSString *path = [[NSBundle mainBundle] pathForResource:@"Emitter.bundle/red_packet.png" ofType:nil];
    NSData *data = [NSData dataWithContentsOfURL:[NSURL fileURLWithPath:path]];
    emitterCell.contents = (id)[[UIImage imageWithData:data] CGImage];// 粒子的内容 是CGImageRef类型
    emitterCell.birthRate = 10.0f;// 每秒产生的粒子数量
    emitterCell.lifetime = 20.0f;// 粒子的生命周期
    emitterCell.velocity = 8.f;  // 粒子的速度
    emitterCell.yAcceleration = 1000.f; // 粒子再y方向的加速的
    emitterCell.scale = 0.8f;  // 粒子的缩放比例
    
    redPacketLayer.emitterCells = @[emitterCell];
}

代码很简单，看CAEmitterLayer和CAEmitterCell你会发现，这里面有好多相似的属性，你可能会迷糊，但是API说明的很清楚，CAEmitterLayer的这些属性会作为CAEmitterCell相同属性的系数，举个例子，如果CAEmitterCell的birthRate = 20(每秒产生的粒子数量)，其所属的CAEmitterLayer的birthRate = 2,那么在其他参数默认的情况下，这个CAEmitterCell总的每秒产生的粒子数量是20 * 2 = 40 。也就是每秒会产生20个这样的粒子。

然后我们分别来说明一下他们的属性作用吧：
1、CAEmitterLayer

@property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells; //存放例子
@property float birthRate; // 每秒产生的粒子数量的系数，默认为1/s
@property float lifetime;//粒子的生命周期系数，默认为1s
@property CGPoint emitterPosition;// 发射器在xy平面的中心位置
@property CGFloat emitterZPosition;//   发射器在Z平面的位置
@property CGSize emitterSize;// 发射器的尺寸大小
@property CGFloat emitterDepth;// 发射器的深度，在某些模式下会产生立体效果
@property(copy) CAEmitterLayerEmitterShape emitterShape;// 发射器的形状
@property(copy) CAEmitterLayerEmitterMode emitterMode;//  发射器的发射模式
@property(copy) CAEmitterLayerRenderMode renderMode;//   发射器渲染模式
@property BOOL preservesDepth; //是否开启三维空间效果
@property float velocity;//粒子的运动速度系数，默认为1
@property float scale;//粒子的缩放比例系数，默认为1
@property float spin;//粒子的旋转位置，默认为1
@property unsigned int seed;// 随机数发生器

这就是CAEmitterLayer的一些属性
其中emitterShape包括这几种

CA_EXTERN CAEmitterLayerEmitterShape const kCAEmitterLayerPoint
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//点的形状，粒子从一个点发出
CA_EXTERN CAEmitterLayerEmitterShape const kCAEmitterLayerLine
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//线的形状，粒子从一条线发出
CA_EXTERN CAEmitterLayerEmitterShape const kCAEmitterLayerRectangle
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//矩形形状，粒子从一个矩形中发出
CA_EXTERN CAEmitterLayerEmitterShape const kCAEmitterLayerCuboid
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//立方体形状，这里要生效的话需要设置z方向的数据，如果不设置就同矩形状
CA_EXTERN CAEmitterLayerEmitterShape const kCAEmitterLayerCircle
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//圆形，粒子会在圆形范围发射
CA_EXTERN CAEmitterLayerEmitterShape const kCAEmitterLayerSphere
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//立体圆形(3D)，三维的圆形，同样需要设置z方向数据，不设置则通二维一样

emitterMode有这几种

CA_EXTERN CAEmitterLayerEmitterMode const kCAEmitterLayerPoints
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));////从发射器中发出
CA_EXTERN CAEmitterLayerEmitterMode const kCAEmitterLayerOutline
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));///从发射器边缘发出
CA_EXTERN CAEmitterLayerEmitterMode const kCAEmitterLayerSurface
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//从发射器表面发出
CA_EXTERN CAEmitterLayerEmitterMode const kCAEmitterLayerVolume
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//相对于3D形状的“球体内”或“立方体内”发射,从发射器中点发出

renderMode有这几种模式

CA_EXTERN CAEmitterLayerRenderMode const kCAEmitterLayerUnordered
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//粒子是无序出现的，多个发射源将混合
CA_EXTERN CAEmitterLayerRenderMode const kCAEmitterLayerOldestFirst
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//声明久的粒子会被渲染在最上层
CA_EXTERN CAEmitterLayerRenderMode const kCAEmitterLayerOldestLast
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//刚开始的粒子会被渲染在最上层
CA_EXTERN CAEmitterLayerRenderMode const kCAEmitterLayerBackToFront
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//粒子的渲染按照Z轴的前后顺序进行
CA_EXTERN CAEmitterLayerRenderMode const kCAEmitterLayerAdditive
    API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0));//这种模式会进行粒子混合

好了，这基本上就是CAEmitterLayer的所有属性了，然后我们说一下CAEmitterCell的属性、方法。

2、CAEmitterCell

+ (instancetype)emitterCell;//类方法创建发射粒子
+ (nullable id)defaultValueForKey:(NSString *)key;//获取某一属性的值
- (BOOL)shouldArchiveValueForKey:(NSString *)key;//返回指定的属性值是否可以归档。基本上不用
@property(nullable, copy) NSString *name;//设置发射粒子的名称
@property(getter=isEnabled) BOOL enabled;//是否允许发射粒子渲染
@property float birthRate;//发射粒子的产生率，默认0
@property float lifetime;//发射粒子的生命周期,以秒为单位。默认0
@property float lifetimeRange;//发射粒子的生命周期范围,以秒为单位。默认0
@property CGFloat emissionLatitude;//发射粒子的指定纬度,纬度角代表了在x-z轴平面坐标系中与x轴之间的夹角，也就是粒子在Z轴方向的发射角度，默认0
@property CGFloat emissionLongitude;//发射粒子的指定经度,经度角代表了在x-y轴平面坐标系中与x轴之间的夹角，也就是粒子在xy平面的发射角度，默认0:
@property CGFloat emissionRange;//发射粒子角度范围,默认0，以锥形分布开的发射角度。角度用弧度制。粒子均匀分布在这个锥形范围内;
@property CGFloat velocity;//发射粒子的速度 ，默认0
@property CGFloat velocityRange;//发射粒子的速度范围 ，默认0
@property CGFloat xAcceleration;//发射粒子x方向的加速度，默认0
@property CGFloat yAcceleration;//发射粒子y方向的加速度，默0
@property CGFloat zAcceleration;//发射粒子z方向的加速度，默认0
@property CGFloat scale;//发射粒子的缩放系数，默认1
@property CGFloat scaleRange;//发射粒子的缩放系数范围，默认0
@property CGFloat scaleSpeed;//发射粒子的缩放速度，默认0
@property CGFloat spin;//发射粒子的平均旋转速度，默认是0
@property CGFloat spinRange;//发射粒子的平均旋转速度范围，默认是0
@property(nullable) CGColorRef color;//发射粒子的颜色,默认白色
@property float redRange;//发射粒子红色的范围,默认0
@property float greenRange;//发射粒子绿色的范围,默认0
@property float blueRange;//发射粒子蓝色的范围,默认0
@property float alphaRange;//发射粒子透明度的范围,默认0
@property float redSpeed;//发射粒子红色的变化速度,默认0
@property float greenSpeed;//发射粒子绿色的变化速度,默认0
@property float blueSpeed;//发射粒子蓝色的变化速度,默认0
@property float alphaSpeed;//发射粒子透明度的变化速度,默认0
@property(nullable, strong) id contents;//发射的渲染粒子的内容，可以设置为一个CGImage的对象
@property CGRect contentsRect;//发射的渲染粒子内容的渲染范围
@property CGFloat contentsScale;//内容的缩放系数

//下面三个是拉伸过滤，没使用过，具体的话可以看看这篇文章：https://www.jianshu.com/p/ae216733eacc
@property(copy) NSString *minificationFilter;
@property(copy) NSString *magnificationFilter;
@property float minificationFilterBias;

@property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells;// 粒子里面的包含的粒子
@property(nullable, copy) NSDictionary *style; //不知道干什么用的

基本上就是这些，更多的效果，需要我们自己去探索，了解了他们的一些参数就可以做出一些效果来了，最后再奉上自己的demo

希望大家能提出宝贵的意见，可以给我留言，也可以发邮件到我的邮箱：namezyqyx@163.com
谢谢大家，如果你有更好的想法或文章请告知，不胜感激。