iOS粒子系统CAEmitterLayer 效果

开始iOS的动效学习,一开始只对普通的CALayer有所了解,偶然的机会想到做一些全局的飘洒的效果。当时采用最笨的方法通过不断的创建CALayer结合UIView来实现动画,效果其实还行。后来了解到CAEmitterLayer这个iOS系统下的粒子系统。

CAEmitterLayer这个CALayer需要设置的参数特别的多,每一种参数都会产生特定的效果,这里自己摸索了下,记录下来,最后做了个飘洒圆形图片的效果。

CAEmitterLayer的创建主要包括两部分:CAEmitterLayer、CAEmitterCell,然后将其关联起来就可以了CAEmitterLayer.emitterCells = @[CAEmitterCell],基本代码结构如下:

其实这段代码就是我们创建上面飘落效果的代码,看吧,我们需要做的事情就是为了达到所想要的效果而不停的调整设置。那么我们需要理解的关键就在于理解里面的各个字段,对每个字段的改变所达到的效果有个了解。

下面我们列举下所设置的参数以及其对应的效果

Layer相关:

position: 发射位置

CGPointMake(self.view.bounds.size.width, 0)           CGPointMake(self.view.bounds.size.width / 2, 0)

emitterSize:发射源的尺寸大小,其实这个emitterSize结合position构建了发射源的位置及大小的矩形区域rect

emitterShape:发射源的形状,这个字段规定了发射源的形状

kCAEmitterLayerPoint:点形状,发射源的形状就是一个点,位置在上面position设置的位置

kCAEmitterLayerLine:线形状,发射源的形状是一条线,位置在rect的横向的位于垂直方向中间那条

kCAEmitterLayerRectangle:矩形状,发射源是一个矩形,就是上面生成的那个矩形rect

kCAEmitterLayerCuboid:立体矩形形状,发射源是一个立体矩形,这里要生效的话需要设置z方向的数据,如果不设置就同矩形状

kCAEmitterLayerCircle:圆形形状,发射源是一个圆形,形状为矩形包裹的那个圆,二维的

kCAEmitterLayerSphere:立体圆形,三维的圆形,同样需要设置z方向数据,不设置则通二维一样

emitterMode:发射模式,这个字段规定了在特定形状上发射的具体形式是什么

kCAEmitterLayerPoints:点模式,发射器是以点的形势发射粒子。

如果发射形状为:kCAEmitterLayerPoint,则发射效果为在发射点发射粒

如果发射形状为:kCAEmitterLayerLine,则发射效果为在直线两端都进行粒子的发射

如果发射形状为:kCAEmitterLayerRectangle,则发射效果为矩形的四个角

如果发射形状为:kCAEmitterLayerCircle,则发射效果同kCAEmitterLayerPoint一样

kCAEmitterLayerOutline: 这个模式下整个边框都是发射点,即边框进行发射

如果发射形状为kCAEmitterLayerPoint:效果就还是一个点进行发射

如果发射形状为kCAEmitterLayerLine:效果就是哪条直线进行抛洒

如果发射形状为kCAEmitterLayerRectangle:效果就是沿着那个矩形框的边框进行发射

如果发射形状为kCAEmitterLayerCircle:效果就是沿着那个圆形的边框进行发射

效果依次如下所示:

kCAEmitterLayerSurface:这个模式下是我们边框包含下的区域进行抛洒

如果发射形状为kCAEmitterLayerPoint:效果就还是一个点进行发射

如果发射形状为kCAEmitterLayerLine:效果就是哪条直线进行抛洒

如果发射形状为kCAEmitterLayerRectangle:效果就是沿着那个矩形框的内部区域中进行发射

如果发射形状为kCAEmitterLayerCircle:效果就是沿着那个圆形的边框包含的区域中进行发射

效果依次如下所示:

kCAEmitterLayerVolume:这个的效果和kCAEmitterLayerSurface很像

上面介绍了Layer方面发射形状、发射位置、发射模式的探索,从上面能够大致构建自己想要的发射形状。下面我们就要探索抛洒的元素了CAEmitterCell相关的属性来构建我们想要抛洒的对象。

contents:cell的内容,一般使用图片,可以采用已有的或者自己绘制都可。

birthRate:出生率,这个就是代表每秒有多少个对象生成。

lifetime:生存时间,这个代表对象能够存活的时间

lifetimeRange:生存时间浮动,这个代表生存时间会在这个数字内浮动。比如lifetime = 10s, lifetimeRange = 5s那么实际的每个cell的lifetime = [5s - 15s]。

velocity:运动速度,这个代表粒子在抛洒中的运动速度

velocityRange:运动速度的浮动数字。同lifetimeRange的作用一样,保证了每个粒子能够有个随机的速度值

yAcceleration:Y方向的加速度,这个可以模拟地球上的重力加速度,值越大则每个粒子下落的越快

velocity=40.f; yAcceleration=15.f  所有的对象都匀速运动,而且y方向有个不断偏移的过程

velocity=40.f; velocityRange=100.f; yAcceleration=80.f   所有对象的速度不恒定了,且沿着y方向的偏移越发厉害了

emissionLongitude:抛洒的角度,就是指定cell从什么方向进行抛洒

emissionRange: 抛洒角度的浮动角度,这个角度指定了抛洒出的对象能够在多大角度范围内扩散。

emissionLongitude=M_PI; emissionRange=M_PI_4

emissionLongitude=0; emissionRange=M_PI_2

scale: 对象的初始缩放大小

scaleRange:对象的缩放扰动范围

scaleSpeed: 对象缩放的速度

alphaRange:对象的透明度扰动范围

alphaSpeed:对象的透明度的变动速度

color:对象的颜色,这里我们的cell可以对图片从新进行颜色的填充,所以如果对于我们设计的一个单色的图片来说,这个字段将很有用

redRange:红色通道的扰动范围

greenRange:绿色通道的扰动范围

blueRange:蓝色通道的扰动范围

redSpeed:红色颜色的变更速度

greenSpeed:绿色颜色的变更速度

blueSpeed:蓝色颜色的变更速度

我们通过上面的设置,可以产生随机的颜色数值,正如我们实例中所示的那样。需要注意的是如果我们设置了redSpeed、greenSpeed、blueSpeed的话,对象的最后颜色可能变为了白色或者黑色。

redSpeed=.2f; greenSpeed=.2f; blueSpeed=.2f; 可以看到对象会很快的失去光泽。

当然你可以对这些Layer进行动画,譬如position, scale, birthRate 等等。譬如以下代码就是让他的position随着touch移动,以及对scale做了动画效果。代码如下:

而他的运行效果如下:


代码设置/结构说明:

1、CAEmitterCell

CAEmitterCell *effectCell = [CAEmitterCell emitterCell];

effectCell 几个重要属性:

1).birthRate 顾名思义没有这个也就没有effectCell,这个必须要设置,具体含义是每秒某个点产生的effectCell数量

2).lifetime & lifetimeRange 表示effectCell的生命周期,既在屏幕上的显示时间要多长。

3).contents 这个和CALayer一样,只是用来设置图片

4).name这个是当effectCell存在caeEmitter 的emitterCells中用来辨认的。用到setValue forKeyPath比较有用

5).velocity & velocityRange & emissionRange 表示cell向屏幕右边飞行的速度 & 在右边什么范围内飞行& +-角度扩散

6).把cell做成array放进caeEmitter.emitterCells里去。caeEmitter.renderMode有个效果很不错,能变成火的就是kCAEmitterLayerAdditive

属性:

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方向的加速度分量

2、CAEmitterLayer

CAEmitterLayer提供了一个基于Core Animation的粒子发射系统,粒子用CAEmitterCell来初始化。粒子画在背景层盒边界上

属性:

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

emitterCells:装着CAEmitterCell对象的数组,被用于把粒子投放到layer上;

emitterDepth:决定粒子形状的深度联系:emittershape

emitterMode:发射模式

NSString * const kCAEmitterLayerPoints;

NSString * const kCAEmitterLayerOutline;

NSString * const kCAEmitterLayerSurface;

NSString * const kCAEmitterLayerVolume;

emitterPosition:发射位置

emitterShape:发射源的形状:

NSString * const kCAEmitterLayerPoint;

NSString * const kCAEmitterLayerLine;

NSString * const kCAEmitterLayerRectangle;

NSString * const kCAEmitterLayerCuboid;

NSString * const kCAEmitterLayerCircle;

NSString * const kCAEmitterLayerSphere;

emitterSize:发射源的尺寸大;

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

lifetime:粒子生命周期

preservesDepth:不是多很清楚(粒子是平展在层上)

renderMode:渲染模式:

NSString * const kCAEmitterLayerUnordered;

NSString * const kCAEmitterLayerOldestFirst;

NSString * const kCAEmitterLayerOldestLast;

NSString * const kCAEmitterLayerBackToFront;

NSString * const kCAEmitterLayerAdditive;

scale:粒子的缩放比例:

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

spin:自旋转速度

velocity:粒子速度

Demo下载地址:https://pan.baidu.com/s/1jI5fdIY

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容