美文网首页
iOS核心动画 - CAEmitterLayer&CAEmitt

iOS核心动画 - CAEmitterLayer&CAEmitt

作者: ShIwEn9 | 来源:发表于2020-02-21 17:23 被阅读0次

    通常我们的点赞效果,下emoji雨等效果都被称为粒子效果,通常我们都是通过CAEmitterLayer&CAEmitterCell相结合实现的。


    上图是 CALayer 常用的一些子类,通过上图可以发现:CAEmitterLayer&CAEmitterCell是 CALyaer的子类,所以自然的遵循继承的相关准则。而我们知道CALayer的底层是对OpenGL的一层封装,暴露其接口而组成的一个簇,所以自然如果我们要是不用CAEmitterLayer来实现粒子效果自然就会很麻烦。

    一、CAEmitterLayer&CAEmitterCell的相关介绍
    1. CAEmitterLayer&CAEmitterCell的关系:
      首先我们得知道,要实现粒子效果,单单的使用CAEmitterLayer或CAEmitterCell是实现不了的,只能两者搭配起来使用才可以。
      发射类:CAEmitterLayer
      发射的离子:CAEmitterCell
      CAEmitterLayer 是 CAEmitterCell 个数数组:
     @property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells;
    
    1. CAEmitterLayer相关属性:
    产生离子的速度(产生率)
     @property float birthRate;
     
     离子的生命周期 默认为1
     @property float lifetime;
    
     离子发射的中心点 默认为屏幕的中心
     @property CGPoint emitterPosition;
     离子的深度 z轴
     @property CGFloat emitterZPosition;
    
     离子发射的尺寸 —— 离子发射源的尺寸
     @property CGSize emitterSize;
     离子发射的深度
     @property CGFloat emitterDepth;
    
     离子发射的形状 默认点形状
     @property(copy) CAEmitterLayerEmitterShape emitterShape;
    
     离子发射的模式
     @property(copy) CAEmitterLayerEmitterMode emitterMode;
    
     离子渲染的模式
     @property(copy) CAEmitterLayerRenderMode renderMode;
    
     离子是否需要深度
     @property BOOL preservesDepth;
    
     离子的速度 默认1.0
     @property float velocity;
    
     离子的缩放比例 默认1.0
     @property float scale;
    
     离子的自旋
     @property float spin;
    
     随机的发射器
     @property unsigned int seed;
    
    

    大部分的属性看着翻译过来的注释就可以理解;那就对少部分个人觉得需要着重理解记忆的进行解释:

    • emitterShape:离子发射的形状
      这是一个枚举类型,几种类型分别是:
      • point (the default) - 点:发射源的形状就是一个点,位置在上面 position设置的位置
      • line - 线形:发射源的形状是一条线,位置在rect的横向的位于垂直方向中间那条
      • rectangle - 矩形:矩形状,发射源的形状是一个矩形,就是上面生成的那个矩形rect
      • circle - 环形:发射源是一个圆形,形状为矩形包裹的那个圆,二维的
        cuboid - 长方体(3D):发射源是一个立体矩形,这里要生效的话需要设置z方向的数据,如果不设置就同矩形状
        sphere - 球(3D):三维的圆形,同样需要设置z方向数据,不设置则通二维一样。

    这些形状可以在调试的时候修改来看看有什么不同,比如我们设置的红包效果,就是用的kCAEmitterLayerLine

    redpacketLayer.emitterPosition = CGPointMake(100, 100);
    redpacketLayer.emitterSize = CGSizeMake(20, 0);
    redpacketLayer.emitterShape = kCAEmitterLayerLine;
    
    达到的效果
    • emitterMode:离子发射的模式
      这个字段规定了在特定形状上发射的具体形式是什么。它的作用其实就是进一步决定发射的区域是在发射形状的哪一部份。
      这也是一个枚举类型,几种类型分别是:

      • points:点模式,发射器是以点的形式发射粒子。发射点就是形状的某个特殊的点,比如shap是一个点的话,那么这个点就是中心点,如果是圆形,那么就是圆心。
      • outline:轮廓模式,从形状的边界上发射粒子。
      • surface:表面模式,从形状的表面上发射粒子。
      • volume (the default).:是相对于3D形状的“球体内”或“立方体内”发射
    • CAEmitterLayer决定粒子系数的一些属性:

    birthRate: 粒子产生系数,默认1.0;
    每个粒子cell的产生率乘以这个粒子产生系数,得出每一秒产生这个粒子的个数。 即:每秒粒子产生个数 = layer.birthRate * cell.birthRate ;
    lifetime:粒子的生命周期系数,默认1.0。计算方式同上;
    velocity:粒子速度系数, 默认1.0。计算方式同上;
    scale:粒子的缩放比例系数, 默认1.0。计算方式同上;
    spin:自旋转速度系数, 默认1.0。计算方式同上;

    1. 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;
    
     生命周期
     @property float lifetime;
     生命周期的范围
     @property float lifetimeRange;
    
     x轴和z轴 平面之间的夹角
     @property CGFloat emissionLatitude;
     x轴和y轴 平面之间的夹角
     @property CGFloat emissionLongitude;
     发射的角度
     @property CGFloat emissionRange;
    
     离子发射的速度
     @property CGFloat velocity;
     离子发射的速度的范围
     @property CGFloat velocityRange;
    
     加速度
     @property CGFloat xAcceleration;
     @property CGFloat yAcceleration;
     @property CGFloat zAcceleration;
    
     缩放比例
     @property CGFloat scale;
     @property CGFloat scaleRange;
     @property CGFloat scaleSpeed;
    
     自旋
     @property CGFloat spin;
     @property CGFloat spinRange;
    
     颜色
     @property(nullable) CGColorRef color;
    
     颜色范围
     @property float redRange;
     @property float greenRange;
     @property float blueRange;
     @property float alphaRange;
    
     颜色变换速度
     @property float redSpeed;
     @property float greenSpeed;
     @property float blueSpeed;
     @property float alphaSpeed;redc/gfdsa 
    
     内容
     @property(nullable, strong) id contents;
    
     内容的大小
     @property CGRect contentsRect;
     内容的缩放比例
     @property CGFloat contentsScale;
    
     纹理
     @property(copy) NSString *minificationFilter;
     @property(copy) NSString *magnificationFilter;
     @property float minificationFilterBias;
    
     嵌套的离子
     @property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells;
     
     @property(nullable, copy) NSDictionary *style;
    

    AEmitterLayer就是粒子的工厂,但是要实现效果就必须需要CAEmitterCell的帮助

    在CAEmitterCell属性中,可以发现很多的属性都是一个 range 值:

    • color相关:
      redRange、greenRange、blueRange、alphaRange:这些是对应的color的RGBA的取值范围,取值范围为0~1;
      redSpeed、greenSpeed、blueSpeed、alphaSpeed:这些是对应的是粒子的RGBA的变化速度,取值范围为0~1。表示每秒钟的RGBA的变化率。
    snowCell.lifetime = 20.f;  // 粒子的生命周期
        snowCell.color = [[UIColor colorWithRed:0.f green:1.f blue:1.f alpha:1.f]CGColor];
        snowCell.redSpeed = 0.2;
    

    这里设置了粒子颜色的RGBA,以及redSpeed,其他的没设置默认为0。粒子的生命周期(lifetime)为20秒,那么这个粒子从产生到消失的时间就是20秒。它的Red值为0,redSpeed为0.2,那么在粒子的这个生命周期内,粒子的每秒钟的Rde值就会增加0.2 * 255,表现在外观上的状态就是粒子颜色在不断变化,接近白色。最后粒子生命周期结束的时候,粒子的color正好是RGBA(1,1,1,1)。当然个变化的速度也可以负数,计算方式相同。比如要设置烟花的效果,那么要让在爆炸的过程中颜色变化,就是通过这样的设置达到的效果。

    ios核心动画 - CAEmitterLayer&CAEmitterCell粒子效果的大致介绍就是这些,欢迎补充和批评

    参考文章:【iOS】CALayer之CAEmitterLayer粒子发射器的神奇效果

    相关文章

      网友评论

          本文标题:iOS核心动画 - CAEmitterLayer&CAEmitt

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