开始iOS的动效学习,一开始只对普通的CALayer有所了解,偶然的机会想到做一些全局的飘洒的效果。当时采用最笨的方法通过不断的创建CALayer结合UIView来实现动画,效果其实还行。后来了解到CAEmitterLayer这个iOS系统下的粒子系统。
CAEmitterLayer这个CALayer需要设置的参数特别的多,每一种参数都会产生特定的效果,这里自己摸索了下,记录下来,最后做了个飘洒圆形图片的效果。
![](https://img.haomeiwen.com/i5974565/e7c9ebdfe9772b77.gif)
CAEmitterLayer的创建主要包括两部分:CAEmitterLayer、CAEmitterCell,然后将其关联起来就可以了CAEmitterLayer.emitterCells = @[CAEmitterCell],基本代码结构如下:
![](https://img.haomeiwen.com/i5974565/7084aeaa2124773f.png)
其实这段代码就是我们创建上面飘落效果的代码,看吧,我们需要做的事情就是为了达到所想要的效果而不停的调整设置。那么我们需要理解的关键就在于理解里面的各个字段,对每个字段的改变所达到的效果有个了解。
下面我们列举下所设置的参数以及其对应的效果
Layer相关:
position: 发射位置
CGPointMake(self.view.bounds.size.width, 0) CGPointMake(self.view.bounds.size.width / 2, 0)
![](https://img.haomeiwen.com/i5974565/558a6bb1e1e4d93b.png)
![](https://img.haomeiwen.com/i5974565/d8421c5c48446e80.png)
emitterSize:发射源的尺寸大小,其实这个emitterSize结合position构建了发射源的位置及大小的矩形区域rect
emitterShape:发射源的形状,这个字段规定了发射源的形状
kCAEmitterLayerPoint:点形状,发射源的形状就是一个点,位置在上面position设置的位置
kCAEmitterLayerLine:线形状,发射源的形状是一条线,位置在rect的横向的位于垂直方向中间那条
kCAEmitterLayerRectangle:矩形状,发射源是一个矩形,就是上面生成的那个矩形rect
kCAEmitterLayerCuboid:立体矩形形状,发射源是一个立体矩形,这里要生效的话需要设置z方向的数据,如果不设置就同矩形状
kCAEmitterLayerCircle:圆形形状,发射源是一个圆形,形状为矩形包裹的那个圆,二维的
kCAEmitterLayerSphere:立体圆形,三维的圆形,同样需要设置z方向数据,不设置则通二维一样
emitterMode:发射模式,这个字段规定了在特定形状上发射的具体形式是什么
kCAEmitterLayerPoints:点模式,发射器是以点的形势发射粒子。
如果发射形状为:kCAEmitterLayerPoint,则发射效果为在发射点发射粒
![](https://img.haomeiwen.com/i5974565/64c46e6ee0aa3f76.png)
如果发射形状为:kCAEmitterLayerLine,则发射效果为在直线两端都进行粒子的发射
![](https://img.haomeiwen.com/i5974565/344a3fbab686c802.png)
如果发射形状为:kCAEmitterLayerRectangle,则发射效果为矩形的四个角
![](https://img.haomeiwen.com/i5974565/fdcae3680024059f.png)
如果发射形状为:kCAEmitterLayerCircle,则发射效果同kCAEmitterLayerPoint一样
![](https://img.haomeiwen.com/i5974565/848468642928e2ad.png)
kCAEmitterLayerOutline: 这个模式下整个边框都是发射点,即边框进行发射
如果发射形状为kCAEmitterLayerPoint:效果就还是一个点进行发射
如果发射形状为kCAEmitterLayerLine:效果就是哪条直线进行抛洒
如果发射形状为kCAEmitterLayerRectangle:效果就是沿着那个矩形框的边框进行发射
如果发射形状为kCAEmitterLayerCircle:效果就是沿着那个圆形的边框进行发射
效果依次如下所示:
![](https://img.haomeiwen.com/i5974565/59568a7c591713a8.png)
![](https://img.haomeiwen.com/i5974565/2ea99a7c55bbbd82.png)
![](https://img.haomeiwen.com/i5974565/3422e1465be578ba.png)
![](https://img.haomeiwen.com/i5974565/bfef0b781a2e312d.png)
kCAEmitterLayerSurface:这个模式下是我们边框包含下的区域进行抛洒
如果发射形状为kCAEmitterLayerPoint:效果就还是一个点进行发射
如果发射形状为kCAEmitterLayerLine:效果就是哪条直线进行抛洒
如果发射形状为kCAEmitterLayerRectangle:效果就是沿着那个矩形框的内部区域中进行发射
如果发射形状为kCAEmitterLayerCircle:效果就是沿着那个圆形的边框包含的区域中进行发射
效果依次如下所示:
![](https://img.haomeiwen.com/i5974565/1067bff57800a526.gif)
![](https://img.haomeiwen.com/i5974565/470c2281b20218f9.gif)
![](https://img.haomeiwen.com/i5974565/26d65a823ced9212.gif)
![](https://img.haomeiwen.com/i5974565/bb83dbe8cf41a039.gif)
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方向有个不断偏移的过程
![](https://img.haomeiwen.com/i5974565/0b4a90367b0ba889.gif)
velocity=40.f; velocityRange=100.f; yAcceleration=80.f 所有对象的速度不恒定了,且沿着y方向的偏移越发厉害了
![](https://img.haomeiwen.com/i5974565/8dacc4aa68d27a19.gif)
emissionLongitude:抛洒的角度,就是指定cell从什么方向进行抛洒
emissionRange: 抛洒角度的浮动角度,这个角度指定了抛洒出的对象能够在多大角度范围内扩散。
emissionLongitude=M_PI; emissionRange=M_PI_4
![](https://img.haomeiwen.com/i5974565/98671a391a651940.gif)
emissionLongitude=0; emissionRange=M_PI_2
![](https://img.haomeiwen.com/i5974565/9da2a5ac7cd8e50f.gif)
scale: 对象的初始缩放大小
scaleRange:对象的缩放扰动范围
scaleSpeed: 对象缩放的速度
alphaRange:对象的透明度扰动范围
alphaSpeed:对象的透明度的变动速度
color:对象的颜色,这里我们的cell可以对图片从新进行颜色的填充,所以如果对于我们设计的一个单色的图片来说,这个字段将很有用
redRange:红色通道的扰动范围
greenRange:绿色通道的扰动范围
blueRange:蓝色通道的扰动范围
redSpeed:红色颜色的变更速度
greenSpeed:绿色颜色的变更速度
blueSpeed:蓝色颜色的变更速度
我们通过上面的设置,可以产生随机的颜色数值,正如我们实例中所示的那样。需要注意的是如果我们设置了redSpeed、greenSpeed、blueSpeed的话,对象的最后颜色可能变为了白色或者黑色。
redSpeed=.2f; greenSpeed=.2f; blueSpeed=.2f; 可以看到对象会很快的失去光泽。
![](https://img.haomeiwen.com/i5974565/0551aea61b121f21.gif)
当然你可以对这些Layer进行动画,譬如position, scale, birthRate 等等。譬如以下代码就是让他的position随着touch移动,以及对scale做了动画效果。代码如下:
![](https://img.haomeiwen.com/i5974565/7404ac3db39409bc.png)
而他的运行效果如下:
![](https://img.haomeiwen.com/i5974565/f8860beee0ddb1fd.gif)
当然还有很多可以调节出来的效果,大家可以组合不同的参数试试。这里我只是简单的组合了下,有个大概的印象。祝愉快!
网友评论