開(kāi)始iOS的動(dòng)效學(xué)習(xí),一開(kāi)始只對(duì)普通的CALayer有所了解鞋吉,偶然的機(jī)會(huì)想到做一些全局的飄灑的效果。當(dāng)時(shí)采用最笨的方法通過(guò)不斷的創(chuàng)建CALayer結(jié)合UIView來(lái)實(shí)現(xiàn)動(dòng)畫商蕴,效果其實(shí)還行。后來(lái)了解到CAEmitterLayer這個(gè)iOS系統(tǒng)下的粒子系統(tǒng)芝发。
CAEmitterLayer這個(gè)CALayer需要設(shè)置的參數(shù)特別的多绪商,每一種參數(shù)都會(huì)產(chǎn)生特定的效果,這里自己摸索了下辅鲸,記錄下來(lái)格郁,最后做了個(gè)飄灑圓形圖片的效果。
CAEmitterLayer的創(chuàng)建主要包括兩部分:CAEmitterLayer独悴、CAEmitterCell例书,然后將其關(guān)聯(lián)起來(lái)就可以了CAEmitterLayer.emitterCells = @[CAEmitterCell],基本代碼結(jié)構(gòu)如下:
其實(shí)這段代碼就是我們創(chuàng)建上面飄落效果的代碼刻炒,看吧决采,我們需要做的事情就是為了達(dá)到所想要的效果而不停的調(diào)整設(shè)置。那么我們需要理解的關(guān)鍵就在于理解里面的各個(gè)字段坟奥,對(duì)每個(gè)字段的改變所達(dá)到的效果有個(gè)了解树瞭。
下面我們列舉下所設(shè)置的參數(shù)以及其對(duì)應(yīng)的效果
Layer相關(guān):
position: 發(fā)射位置
CGPointMake(self.view.bounds.size.width, 0)?????????? CGPointMake(self.view.bounds.size.width / 2, 0)
emitterSize:發(fā)射源的尺寸大小,其實(shí)這個(gè)emitterSize結(jié)合position構(gòu)建了發(fā)射源的位置及大小的矩形區(qū)域rect
emitterShape:發(fā)射源的形狀爱谁,這個(gè)字段規(guī)定了發(fā)射源的形狀
kCAEmitterLayerPoint:點(diǎn)形狀晒喷,發(fā)射源的形狀就是一個(gè)點(diǎn),位置在上面position設(shè)置的位置
kCAEmitterLayerLine:線形狀访敌,發(fā)射源的形狀是一條線凉敲,位置在rect的橫向的位于垂直方向中間那條
kCAEmitterLayerRectangle:矩形狀,發(fā)射源是一個(gè)矩形寺旺,就是上面生成的那個(gè)矩形rect
kCAEmitterLayerCuboid:立體矩形形狀爷抓,發(fā)射源是一個(gè)立體矩形,這里要生效的話需要設(shè)置z方向的數(shù)據(jù)阻塑,如果不設(shè)置就同矩形狀
kCAEmitterLayerCircle:圓形形狀废赞,發(fā)射源是一個(gè)圓形,形狀為矩形包裹的那個(gè)圓叮姑,二維的
kCAEmitterLayerSphere:立體圓形唉地,三維的圓形,同樣需要設(shè)置z方向數(shù)據(jù)传透,不設(shè)置則通二維一樣
emitterMode:發(fā)射模式耘沼,這個(gè)字段規(guī)定了在特定形狀上發(fā)射的具體形式是什么
kCAEmitterLayerPoints:點(diǎn)模式,發(fā)射器是以點(diǎn)的形勢(shì)發(fā)射粒子朱盐。
如果發(fā)射形狀為:kCAEmitterLayerPoint群嗤,則發(fā)射效果為在發(fā)射點(diǎn)發(fā)射粒
如果發(fā)射形狀為:kCAEmitterLayerLine,則發(fā)射效果為在直線兩端都進(jìn)行粒子的發(fā)射
如果發(fā)射形狀為:kCAEmitterLayerRectangle兵琳,則發(fā)射效果為矩形的四個(gè)角
如果發(fā)射形狀為:kCAEmitterLayerCircle狂秘,則發(fā)射效果同kCAEmitterLayerPoint一樣
kCAEmitterLayerOutline: 這個(gè)模式下整個(gè)邊框都是發(fā)射點(diǎn)骇径,即邊框進(jìn)行發(fā)射
如果發(fā)射形狀為kCAEmitterLayerPoint:效果就還是一個(gè)點(diǎn)進(jìn)行發(fā)射
如果發(fā)射形狀為kCAEmitterLayerLine:效果就是哪條直線進(jìn)行拋灑
如果發(fā)射形狀為kCAEmitterLayerRectangle:效果就是沿著那個(gè)矩形框的邊框進(jìn)行發(fā)射
如果發(fā)射形狀為kCAEmitterLayerCircle:效果就是沿著那個(gè)圓形的邊框進(jìn)行發(fā)射
效果依次如下所示:
kCAEmitterLayerSurface:這個(gè)模式下是我們邊框包含下的區(qū)域進(jìn)行拋灑
如果發(fā)射形狀為kCAEmitterLayerPoint:效果就還是一個(gè)點(diǎn)進(jìn)行發(fā)射
如果發(fā)射形狀為kCAEmitterLayerLine:效果就是哪條直線進(jìn)行拋灑
如果發(fā)射形狀為kCAEmitterLayerRectangle:效果就是沿著那個(gè)矩形框的內(nèi)部區(qū)域中進(jìn)行發(fā)射
如果發(fā)射形狀為kCAEmitterLayerCircle:效果就是沿著那個(gè)圓形的邊框包含的區(qū)域中進(jìn)行發(fā)射
效果依次如下所示:
kCAEmitterLayerVolume:這個(gè)的效果和kCAEmitterLayerSurface很像
上面介紹了Layer方面發(fā)射形狀、發(fā)射位置者春、發(fā)射模式的探索破衔,從上面能夠大致構(gòu)建自己想要的發(fā)射形狀。下面我們就要探索拋灑的元素了CAEmitterCell相關(guān)的屬性來(lái)構(gòu)建我們想要拋灑的對(duì)象钱烟。
contents:cell的內(nèi)容晰筛,一般使用圖片,可以采用已有的或者自己繪制都可拴袭。
birthRate:出生率读第,這個(gè)就是代表每秒有多少個(gè)對(duì)象生成。
lifetime:生存時(shí)間拥刻,這個(gè)代表對(duì)象能夠存活的時(shí)間
lifetimeRange:生存時(shí)間浮動(dòng)怜瞒,這個(gè)代表生存時(shí)間會(huì)在這個(gè)數(shù)字內(nèi)浮動(dòng)。比如lifetime = 10s, lifetimeRange = 5s那么實(shí)際的每個(gè)cell的lifetime = [5s - 15s]般哼。
velocity:運(yùn)動(dòng)速度吴汪,這個(gè)代表粒子在拋灑中的運(yùn)動(dòng)速度
velocityRange:運(yùn)動(dòng)速度的浮動(dòng)數(shù)字。同lifetimeRange的作用一樣逝她,保證了每個(gè)粒子能夠有個(gè)隨機(jī)的速度值
yAcceleration:Y方向的加速度,這個(gè)可以模擬地球上的重力加速度睬捶,值越大則每個(gè)粒子下落的越快
velocity=40.f; yAcceleration=15.f??所有的對(duì)象都勻速運(yùn)動(dòng)黔宛,而且y方向有個(gè)不斷偏移的過(guò)程
velocity=40.f; velocityRange=100.f; yAcceleration=80.f?? 所有對(duì)象的速度不恒定了,且沿著y方向的偏移越發(fā)厲害了
emissionLongitude:拋灑的角度擒贸,就是指定cell從什么方向進(jìn)行拋灑
emissionRange: 拋灑角度的浮動(dòng)角度臀晃,這個(gè)角度指定了拋灑出的對(duì)象能夠在多大角度范圍內(nèi)擴(kuò)散。
emissionLongitude=M_PI; emissionRange=M_PI_4
emissionLongitude=0; emissionRange=M_PI_2
scale: 對(duì)象的初始縮放大小
scaleRange:對(duì)象的縮放擾動(dòng)范圍
scaleSpeed: 對(duì)象縮放的速度
alphaRange:對(duì)象的透明度擾動(dòng)范圍
alphaSpeed:對(duì)象的透明度的變動(dòng)速度
color:對(duì)象的顏色介劫,這里我們的cell可以對(duì)圖片從新進(jìn)行顏色的填充徽惋,所以如果對(duì)于我們?cè)O(shè)計(jì)的一個(gè)單色的圖片來(lái)說(shuō),這個(gè)字段將很有用
redRange:紅色通道的擾動(dòng)范圍
greenRange:綠色通道的擾動(dòng)范圍
blueRange:藍(lán)色通道的擾動(dòng)范圍
redSpeed:紅色顏色的變更速度
greenSpeed:綠色顏色的變更速度
blueSpeed:藍(lán)色顏色的變更速度
我們通過(guò)上面的設(shè)置座韵,可以產(chǎn)生隨機(jī)的顏色數(shù)值险绘,正如我們實(shí)例中所示的那樣。需要注意的是如果我們?cè)O(shè)置了redSpeed誉碴、greenSpeed宦棺、blueSpeed的話,對(duì)象的最后顏色可能變?yōu)榱税咨蛘吆谏?/p>
redSpeed=.2f; greenSpeed=.2f; blueSpeed=.2f; 可以看到對(duì)象會(huì)很快的失去光澤黔帕。
當(dāng)然你可以對(duì)這些Layer進(jìn)行動(dòng)畫代咸,譬如position, scale, birthRate 等等。譬如以下代碼就是讓他的position隨著touch移動(dòng)成黄,以及對(duì)scale做了動(dòng)畫效果呐芥。代碼如下:
而他的運(yùn)行效果如下:
代碼設(shè)置/結(jié)構(gòu)說(shuō)明:
1逻杖、CAEmitterCell
CAEmitterCell *effectCell = [CAEmitterCell emitterCell];
effectCell 幾個(gè)重要屬性:
1).birthRate 顧名思義沒(méi)有這個(gè)也就沒(méi)有effectCell,這個(gè)必須要設(shè)置思瘟,具體含義是每秒某個(gè)點(diǎn)產(chǎn)生的effectCell數(shù)量
2).lifetime & lifetimeRange 表示effectCell的生命周期荸百,既在屏幕上的顯示時(shí)間要多長(zhǎng)。
3).contents 這個(gè)和CALayer一樣潮太,只是用來(lái)設(shè)置圖片
4).name這個(gè)是當(dāng)effectCell存在caeEmitter 的emitterCells中用來(lái)辨認(rèn)的管搪。用到setValue forKeyPath比較有用
5).velocity & velocityRange & emissionRange 表示cell向屏幕右邊飛行的速度 & 在右邊什么范圍內(nèi)飛行& +-角度擴(kuò)散
6).把cell做成array放進(jìn)caeEmitter.emitterCells里去。caeEmitter.renderMode有個(gè)效果很不錯(cuò)铡买,能變成火的就是kCAEmitterLayerAdditive
屬性:
alphaRange:??一個(gè)粒子的顏色alpha能改變的范圍更鲁;
alphaSpeed:粒子透明度在生命周期內(nèi)的改變速度;
birthrate:粒子參數(shù)的速度乘數(shù)因子奇钞;
blueRange:一個(gè)粒子的顏色blue?能改變的范圍澡为;
blueSpeed:?粒子blue在生命周期內(nèi)的改變速度;
color:粒子的顏色
contents:是個(gè)CGImageRef的對(duì)象,既粒子要展現(xiàn)的圖片景埃;
contentsRect:應(yīng)該畫在contents里的子rectangle:
emissionLatitude:發(fā)射的z軸方向的角度
emissionLongitude:x-y平面的發(fā)射方向
emissionRange媒至;周圍發(fā)射角度
emitterCells:粒子發(fā)射的粒子
enabled:粒子是否被渲染
greenrange:?一個(gè)粒子的顏色green?能改變的范圍;
greenSpeed:?粒子green在生命周期內(nèi)的改變速度谷徙;
lifetime:生命周期
lifetimeRange:生命周期范圍
magnificationFilter:不是很清楚好像增加自己的大小
minificatonFilter:減小自己的大小
minificationFilterBias:減小大小的因子
name:粒子的名字
redRange:一個(gè)粒子的顏色red?能改變的范圍拒啰;
redSpeed;?粒子red在生命周期內(nèi)的改變速度;
scale:縮放比例:
scaleRange:縮放比例范圍完慧;
scaleSpeed:縮放比例速度:
spin:子旋轉(zhuǎn)角度
spinrange:子旋轉(zhuǎn)角度范圍
style:不是很清楚:
velocity:速度
velocityRange:速度范圍
xAcceleration:粒子x方向的加速度分量
yAcceleration:粒子y方向的加速度分量
zAcceleration:粒子z方向的加速度分量
2谋旦、CAEmitterLayer
CAEmitterLayer提供了一個(gè)基于Core Animation的粒子發(fā)射系統(tǒng),粒子用CAEmitterCell來(lái)初始化屈尼。粒子畫在背景層盒邊界上
屬性:
birthRate:粒子產(chǎn)生系數(shù)册着,默認(rèn)1.0;
emitterCells:裝著CAEmitterCell對(duì)象的數(shù)組脾歧,被用于把粒子投放到layer上甲捏;
emitterDepth:決定粒子形狀的深度聯(lián)系:emittershape
emitterMode:發(fā)射模式
NSString * const kCAEmitterLayerPoints;
NSString * const kCAEmitterLayerOutline;
NSString * const kCAEmitterLayerSurface;
NSString * const kCAEmitterLayerVolume;
emitterPosition:發(fā)射位置
emitterShape:發(fā)射源的形狀:
NSString * const kCAEmitterLayerPoint;
NSString * const kCAEmitterLayerLine;
NSString * const kCAEmitterLayerRectangle;
NSString * const kCAEmitterLayerCuboid;
NSString * const kCAEmitterLayerCircle;
NSString * const kCAEmitterLayerSphere;
emitterSize:發(fā)射源的尺寸大;
emitterZposition:發(fā)射源的z坐標(biāo)位置鞭执;
lifetime:粒子生命周期
preservesDepth:不是多很清楚(粒子是平展在層上)
renderMode:渲染模式:
NSString * const kCAEmitterLayerUnordered;
NSString * const kCAEmitterLayerOldestFirst;
NSString * const kCAEmitterLayerOldestLast;
NSString * const kCAEmitterLayerBackToFront;
NSString * const kCAEmitterLayerAdditive;
scale:粒子的縮放比例:
seed:用于初始化隨機(jī)數(shù)產(chǎn)生的種子
spin:自旋轉(zhuǎn)速度
velocity:粒子速度
Demo下載地址:https://pan.baidu.com/s/1jI5fdIY