查看原文
其他

CAEmitterLayer 粒子发射器,制作飘落的雪花,放射的烟花

2017-02-20 刘焱 一起众创


其实现在大部分的APP无论是功能还是性能其实都是相差不远的,那么在这个产品相差不远的时代我们如何来吸引用户呢,我认为其中之一就是很炫的动画,接下来我们会学习和认识CAEmitterLayer这个类,并完成一些动画;

一、CAEmitterLayer的定义

CAEmitterLayer提供了一个基于Core Animation的粒子发射系统, 粒子画在Layer层,通过CAEmitterCell来展示的,所以一般来说二者基本是同时出现的。

二、CAEmitterLayer属性介绍

emitterPosition: 发射位置;

emitterSize: 发射源的大小;

emitterMode: 发射模式;

            NSString * const kCAEmitterLayerPoints;             NSString * const kCAEmitterLayerOutline;             NSString * const kCAEmitterLayerSurface;             NSString * const kCAEmitterLayerVolume;

emitterShape:发射源的形状;

           NSString * const kCAEmitterLayerPoint;            NSString * const kCAEmitterLayerLine;            NSString * const kCAEmitterLayerRectangle;            NSString * const kCAEmitterLayerCuboid;            NSString * const kCAEmitterLayerCircle;            NSString * const kCAEmitterLayerSphere;

renderMode: 渲染模式;

           NSString * const kCAEmitterLayerUnordered;            NSString * const kCAEmitterLayerOldestFirst;            NSString * const kCAEmitterLayerOldestLast;            NSString * const kCAEmitterLayerBackToFront;            NSString * const kCAEmitterLayerAdditive;

Properties:

birthRate: 粒子产生系数,默认1;

emitterCells: 装着CAEmitterCell对象的数组;

emitterDepth: 决定粒子形状的深度

emittershape:

emitterZposition: 发射源的z坐标位置;

lifetime: 粒子生命周期;

preservesDepth: 是否将3D例子系统平面化到一个图层;

scale: 粒子的缩放比例;

seed:用于初始化随机数产生的粒子;

spin: 自旋转速度;

velocity:粒子速度

三、CAEmitterCell属性介绍

CAEmitterCell是由AEmitterLayer粒子发射器发射出的粒子,CAEmitterCell定义了粒子发射的方向。

alphaRange: 一个粒子的颜色alpha能改变的范围;

alphaSpeed:粒子透明度在生命周期内的改变速度;

birthrate:每秒发射的粒子数量(比写)

blueRange:一个粒子的blue色能改变的范围;

blueSpeed: 粒子blue在生命周期内的改变速度;

color:粒子的颜色

contents:是个CGImageRef的对象,是粒子要展现的图片;

contentsRect:应该画在contents里的子rectangle;

emissionLatitude:发射的z轴方向的角度

emissionLongitude:x-y平面的发射方向

emissionRange;周围发射角度

emitterCells:粒子发射的粒子

enabled:粒子是否被渲染;

greenrange: 一个粒子的颜色green 能改变的范围;

greenSpeed: 粒子green在生命周期内的改变速度;

lifetime:生命周期;

lifetimeRange:生命周期范围

magnificationFilter:增加自己的大小

minificatonFilter:减小自己的大小

minificationFilterBias:

name:粒子的名字;

redRange:一个粒子的颜色red 能改变的范围;

redSpeed; 粒子red在生命周期内的改变速度;

scale:缩放比例;

scaleRange:缩放比例范围;

scaleSpeed:缩放比例速度:

spin:粒子旋转角度

spinrange:子旋转角度范围

style:

velocity:速度

velocityRange:速度范围

xAcceleration:粒子沿x方向的加速度分量

yAcceleration:粒子沿y方向的加速度分量

zAcceleration:粒子沿z方向的加速度分量

四、雪花飘落

UIImageView *backImage = [[UIImageView alloc] initWithFrame:self.view.bounds]; backImage.image = [UIImage imageNamed:@"snowbg"]; [self.view addSubview:backImage]; _snowflake = [CAEmitterLayer layer]; _snowflake.emitterPosition = CGPointMake(KScreenWith / 2.0, -30); _snowflake.emitterSize  = CGSizeMake(KScreenWith * 2.0, 0.0); _snowflake.emitterMode  = kCAEmitterLayerOutline; _snowflake.emitterShape = kCAEmitterLayerLine;CAEmitterCell *snowflakecell = [CAEmitterCell emitterCell]; snowflakecell.birthRate = 1.0; snowflakecell.lifetime  = 120.0; snowflakecell.velocity  = 1; snowflakecell.velocityRange = 10; snowflakecell.yAcceleration = 2; snowflakecell.emissionRange = 0.5 * M_PI; snowflakecell.spinRange = 0.5 * M_PI; snowflakecell.spin          = 1; snowflakecell.contents  = (id) [[UIImage imageNamed:@"snowflake"] CGImage]; snowflakecell.color = [[UIColor whiteColor]  CGColor]; _snowflake.shadowOpacity = 1.0; _snowflake.shadowRadius  = 0.0; _snowflake.shadowOffset  = CGSizeMake(0.0, 1.0); _snowflake.shadowColor   = [[UIColor lightGrayColor] CGColor]; _snowflake.emitterCells = @[snowflakecell,snowflakecell]; [backImage.layer addSublayer:_snowflake];
示例:


五、烟花

UIImageView *backImage = [[UIImageView alloc] initWithFrame:self.view.bounds]; backImage.image = [UIImage imageNamed:@"firebg"]; [self.view addSubview:backImage];CAEmitterLayer *fire = [CAEmitterLayer layer]; fire.emitterPosition = CGPointMake(KScreenWith/2.0, KScreenHeight * 0.7); fire.emitterSize    = CGSizeMake(KScreenWith, 0); fire.emitterMode    = kCAEmitterLayerOutline; fire.emitterShape   = kCAEmitterLayerLine; fire.seed = 2;//发射时cellCAEmitterCell* dotcell = [CAEmitterCell emitterCell]; dotcell.birthRate   = 6.0; dotcell.emissionRange   = 0.25 * M_PI; dotcell.velocity    = 300; dotcell.velocityRange   = 100; dotcell.yAcceleration   = 75; dotcell.lifetime    = 1.02; dotcell.scale   = 0.2; dotcell.greenRange  = 1.0; dotcell.redRange    = 1.0; dotcell.blueRange   = 1.0; dotcell.spinRange   = M_PI;//爆炸时cellCAEmitterCell* bomcell = [CAEmitterCell emitterCell]; bomcell.birthRate           = 1.0; bomcell.velocity    = 0; bomcell.scale   = 2.5; bomcell.redSpeed    =-1.5; bomcell.blueSpeed   =+1.5; bomcell.greenSpeed          =+1.0; bomcell.lifetime    = 0.35;// 火花散落时cellCAEmitterCell* littlefirecell = [CAEmitterCell emitterCell]; littlefirecell.birthRate    = 400; littlefirecell.velocity = 125; littlefirecell.emissionRange    = 2* M_PI; littlefirecell.yAcceleration    = 75; littlefirecell.lifetime = 3; littlefirecell.contents = (id) [[UIImage imageNamed:@"shadow"] CGImage]; littlefirecell.scaleSpeed   =-0.2; littlefirecell.greenSpeed   =-0.1; littlefirecell.redSpeed = 0.4; littlefirecell.blueSpeed    =-0.1; littlefirecell.alphaSpeed   =-0.25; littlefirecell.spin = 2* M_PI; littlefirecell.spinRange    = 2* M_PI; fire.emitterCells = @[dotcell]; dotcell.emitterCells = @[bomcell]; bomcell.emitterCells = @[littlefirecell]; [backImage.layer addSublayer:fire];
示例:

结束语:

从以上的示例可以看出,其实无论是雪花飘落,还是烟花绽放,CAEmitterLayer都离不开CAEmitterCell,雪花飘落其实是一个CAEmitterCell类对象的重复动作,而烟花的绽放则是三个CAEmitterCell类对象的连续动作;目前就分享到这里了,喜欢的朋友请点赞,需要Demo的朋友请加群(新QQ群:600317968)或扫描下方二维码加群自行下载


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存