CAEmitterLayer 粒子发射器,制作飘落的雪花,放射的烟花
其实现在大部分的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)或扫描下方二维码加群自行下载