首页 >iOS开发

CAEmitterLayer 粒子动画

2019-01-10 10:25 编辑: Gboy 分类:iOS开发 来源:谁遇而安

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

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

然后说一下管理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(nullablecopyNSArray<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(copyCAEmitterLayerEmitterShape emitterShape;// 发射器的形状
@property(copyCAEmitterLayerEmitterMode emitterMode;//  发射器的发射模式
@property(copyCAEmitterLayerRenderMode 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(nullablecopyNSString *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(nullableCGColorRef 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(nullablestrongid contents;//发射的渲染粒子的内容,可以设置为一个CGImage的对象
@property CGRect contentsRect;//发射的渲染粒子内容的渲染范围
@property CGFloat contentsScale;//内容的缩放系数

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

@property(nullablecopyNSArray<CAEmitterCell *> *emitterCells;// 粒子里面的包含的粒子
@property(nullablecopyNSDictionary *style; //不知道干什么用的

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

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

作者:谁遇而安

链接:https://www.jianshu.com/p/1c530aad48c4

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:[性能优化]UITableView性能优化的一点感悟及计算UILabel高度的新方法
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部