美文网首页iOS技术资料iOS
CAEmitterLayer 粒子动画

CAEmitterLayer 粒子动画

作者: 谁遇而安 | 来源:发表于2018-11-04 15:46 被阅读2次

    最近有点时间,研究了一下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
    CAEmitterLayerCALayer的一个子类,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];
    }
    

    代码很简单,看CAEmitterLayerCAEmitterCell你会发现,这里面有好多相似的属性,你可能会迷糊,但是API说明的很清楚,CAEmitterLayer的这些属性会作为CAEmitterCell相同属性的系数,举个例子,如果CAEmitterCellbirthRate = 20(每秒产生的粒子数量),其所属的CAEmitterLayerbirthRate = 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
    谢谢大家,如果你有更好的想法或文章请告知,不胜感激。

    相关文章

      网友评论

        本文标题:CAEmitterLayer 粒子动画

        本文链接:https://www.haomeiwen.com/subject/xzoqxqtx.html