iOS粒子系統(tǒng)CAEmitterLayer 效果

開(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末司顿,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子兄纺,更是在濱河造成了極大的恐慌免猾,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件囤热,死亡現(xiàn)場(chǎng)離奇詭異猎提,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門锨苏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)疙教,“玉大人,你說(shuō)我怎么就攤上這事伞租≌晡剑” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵葵诈,是天一觀的道長(zhǎng)裸弦。 經(jīng)常有香客問(wèn)我,道長(zhǎng)作喘,這世上最難降的妖魔是什么理疙? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮泞坦,結(jié)果婚禮上窖贤,老公的妹妹穿的比我還像新娘。我一直安慰自己贰锁,他們只是感情好赃梧,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著豌熄,像睡著了一般授嘀。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上锣险,一...
    開(kāi)封第一講書(shū)人閱讀 51,165評(píng)論 1 299
  • 那天蹄皱,我揣著相機(jī)與錄音,去河邊找鬼囱持。 笑死夯接,一個(gè)胖子當(dāng)著我的面吹牛焕济,可吹牛的內(nèi)容都是我干的纷妆。 我是一名探鬼主播,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼晴弃,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼掩幢!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起上鞠,我...
    開(kāi)封第一講書(shū)人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤际邻,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后芍阎,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體世曾,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年谴咸,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了轮听。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片骗露。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖血巍,靈堂內(nèi)的尸體忽然破棺而出萧锉,到底是詐尸還是另有隱情,我是刑警寧澤述寡,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布柿隙,位于F島的核電站,受9級(jí)特大地震影響鲫凶,放射性物質(zhì)發(fā)生泄漏禀崖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一掀序、第九天 我趴在偏房一處隱蔽的房頂上張望帆焕。 院中可真熱鬧,春花似錦不恭、人聲如沸叶雹。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)折晦。三九已至,卻和暖如春沾瓦,著一層夾襖步出監(jiān)牢的瞬間满着,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工贯莺, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留风喇,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓缕探,卻偏偏與公主長(zhǎng)得像魂莫,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子爹耗,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容