美文网首页工作生活
iOS基于CAEmitterLayer实现粒子动画

iOS基于CAEmitterLayer实现粒子动画

作者: 盾子 | 来源:发表于2019-06-30 16:21 被阅读0次

    在iOS的核心动画框架Core Animation中,苹果为我们封装了很多特殊图层,这样我们能够非常方便的使用这些图层做一些图层显示效果。其中CAEmitterLayer就是其中之一,CAEmitterLayer是CALayer的一个常用子类,用来实现基于Core Animation的高性能粒子引擎系统。如红包雨,直播点赞发射爱心图片等等都可以通过CAEmitterLayer来实现,并且使用起来非常的简单,我们只需设置好不同的参数,展示的效果就会不一样。

    下面先简单介绍下粒子系统使用到两个类CAEmitterLayer和CAEmitterCell:
    CAEmitterLayer是粒子发射源,用来发射粒子的,它所发射的粒子就是CAEmitterCell
    CAEmitterLayer常用属性和方法的介绍:

    @property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells; // 用来装粒子的数组,支持多种不同的cell
    @property float birthRate; // 粒子产生系数,默认1.0。如一下需要产生5个粒子,就设置成5.0
    @property float lifetime; // 粒子的生命周期,默认1.0秒。也就是粒子从出来到消失的时间
    @property CGPoint emitterPosition; // 决定了粒子发射形状的中心点位置
    @property CGFloat emitterZPosition; // 发射点的z值
    @property CGSize emitterSize; // 发射源的尺寸大小
    @property CGFloat emitterDepth; // 发射源的深度值
    @property(copy) NSString *emitterShape; // 发射源的形状
    @property(copy) NSString *emitterMode; // 发射模式
    @property(copy) NSString *renderMode; // 渲染模式
    @property BOOL preservesDepth;
    @property float velocity; // 粒子速度系数, 默认1.0
    @property float scale; // 粒子的缩放比例系数, 默认1.0
    @property float spin; // 粒子的自旋转速度系数, 默认1.0
    @property unsigned int seed; // 随机数发生器
    

    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;//内容的缩放系数
    

    通过CAEmitterLayer实现红包雨的demo:

    -(void)allRain
    {
        //1. 设置CAEmitterLayer
        CAEmitterLayer * rainLayer = [CAEmitterLayer layer];
        
        //2.在背景图上添加粒子图层
        [self.view.layer addSublayer:rainLayer];
        self.rainLayer = rainLayer;
        
        //3.发射形状--线性
        rainLayer.emitterShape = kCAEmitterLayerLine;
        rainLayer.emitterMode = kCAEmitterLayerSurface;
        rainLayer.emitterSize = self.view.frame.size;
        rainLayer.emitterPosition = CGPointMake(self.view.bounds.size.width * 0.5, -10);
        
        //2. 配置cell
        CAEmitterCell * snowCell = [CAEmitterCell emitterCell];
        snowCell.contents = (id)[[UIImage imageNamed:@"jinbi.png"] CGImage];
        snowCell.birthRate = 1.0;
        snowCell.lifetime = 30;
        snowCell.speed = 2;
        snowCell.velocity = 10.f;
        snowCell.velocityRange = 10.f;
        snowCell.yAcceleration = 60;
        snowCell.scale = 0.1;
        snowCell.scaleRange = 0.f;
        
        CAEmitterCell * hongbaoCell = [CAEmitterCell emitterCell];
        hongbaoCell.contents = (id)[[UIImage imageNamed:@"hongbao.png"] CGImage];
        hongbaoCell.birthRate = 1.0;
        hongbaoCell.lifetime = 30;
        hongbaoCell.speed = 2;
        hongbaoCell.velocity = 10.f;
        hongbaoCell.velocityRange = 10.f;
        hongbaoCell.yAcceleration = 60;
        hongbaoCell.scale = 0.05;
        hongbaoCell.scaleRange = 0.f;
        
        CAEmitterCell * zongziCell = [CAEmitterCell emitterCell];
        zongziCell.contents = (id)[[UIImage imageNamed:@"zongzi2.jpg"] CGImage];
        zongziCell.birthRate = 1.0;
        zongziCell.lifetime = 30;
        zongziCell.speed = 2;
        zongziCell.velocity = 10.f;
        zongziCell.velocityRange = 10.f;
        zongziCell.yAcceleration = 60;
        zongziCell.scale = 0.05;
        zongziCell.scaleRange = 0.f;
        
        // 3.添加到图层上
        rainLayer.emitterCells = @[snowCell,hongbaoCell,zongziCell];
    }
    
    红包雨效果.gif

    相关文章

      网友评论

        本文标题:iOS基于CAEmitterLayer实现粒子动画

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