iOS 粒子效果實(shí)現(xiàn):CAEmitterLayer + CAEmitterCell

粒子效果的實(shí)現(xiàn)需要使用兩個(gè)類(lèi):CAEmitterLayer 和 CAEmitterCell

CAEmitterLayer

CAEmitterLayer是Core Animation中的特殊圖層舍败,繼承自CALayer咨跌,是一個(gè)粒子發(fā)射器熊昌,用于控制粒子效果

屬性

屬性 說(shuō)明
emitterCells 粒子數(shù)組喜滨,創(chuàng)建好的粒子樣式痴怨,需要放入數(shù)組中雏婶,支持多種粒子樣式
birthRate 粒子的產(chǎn)生率过椎,默認(rèn)是1.0
lifetime 粒子的生命周期忆肾,默認(rèn)是1.0
emitterPosition 發(fā)射源的中心點(diǎn)位置荸频,默認(rèn)是(0, 0, 0)
emitterCells 粒子數(shù)組創(chuàng)建好的粒子樣式,需要放入數(shù)組中客冈,支持多種粒子樣式
emitterZPosition 三維立體中的位置旭从,處于立體的效果時(shí)使用
emitterSize 發(fā)射源的尺寸大小
emitterDepth 發(fā)射源的深度
emitterShape 發(fā)射源的形狀,默認(rèn)是point
emitterMode 發(fā)射模式场仲,默認(rèn)是volum
renderMode 渲染模式和悦,默認(rèn)是unordered
preservesDepth 是否需要深度,默認(rèn)是NO(如果設(shè)置為YES渠缕,表示粒子效果是三維空間的)
velocity 粒子初始速度鸽素,默認(rèn)是1.0
scale 粒子縮放比例,默認(rèn)是1.0
spin 粒子自旋轉(zhuǎn)速度亦鳞。默認(rèn)是1.0
seed 隨機(jī)數(shù)發(fā)生器

下面著重介紹下常用的屬性

  • emitterShape:決定發(fā)射源的形狀馍忽,并不是粒子的形狀
  • emitterMode:發(fā)射模式,決定發(fā)射區(qū)域在發(fā)射源的哪一部分
  • emitterSize:發(fā)射源的尺寸大小
  • emitterPosition:發(fā)射源的重心點(diǎn)位置
  • renderMode:渲染模式
  • emitterCells:粒子樣式數(shù)組燕差,每一個(gè)粒子就是一個(gè)CAEmitterCell

其中 emitterShape 遭笋、 emitterMode、renderMode都是枚舉類(lèi)型

emitterShape:發(fā)射源的形狀

發(fā)射源的形狀有以下幾種

發(fā)射源形狀 說(shuō)明
kCAEmitterLayerPoint 點(diǎn)
kCAEmitterLayerLine 線(xiàn)
kCAEmitterLayerRectangle 矩形框
kCAEmitterLayerCuboid 立體矩形框谁不,由于是3D的坐梯,iOS中默認(rèn)是2D,所以需要設(shè)置z方向的數(shù)據(jù)
kCAEmitterLayerCircle 圓形
kCAEmitterLayerSphere 立體圓形刹帕,即球吵血,同樣需要設(shè)置z方向的數(shù)據(jù)

emitterMode:發(fā)射模式

發(fā)射模式有以下幾種

發(fā)射模式 說(shuō)明
kCAEmitterLayerPoints 點(diǎn)模式
kCAEmitterLayerOutline 輪廓模式谎替,從形狀邊緣上發(fā)射粒子
kCAEmitterLayerSurface 表面模式,從形狀的表面上發(fā)射粒子
kCAEmitterLayerVolume 立體模式蹋辅,3D形狀的物體內(nèi)部發(fā)射

renderMode:渲染模式

渲染模式有以下幾種

渲染模式 說(shuō)明
kCAEmitterLayerUnordered 粒子是無(wú)序出現(xiàn)的
kCAEmitterLayerOldestFirst 最先創(chuàng)建的粒子在最前面
kCAEmitterLayerOldestLast 最后創(chuàng)建的粒子在最前面
kCAEmitterLayerBackToFront 粒子的渲染按照z軸的前后順序進(jìn)行
kCAEmitterLayerAdditive 粒子混合

注:每秒粒子產(chǎn)生的個(gè)數(shù) = layer.birthRate * cell.birthRate

CAEmitterCell

CAEmitterCell是粒子的樣式類(lèi)钱贯,用來(lái)創(chuàng)建粒子,類(lèi)似于UITableView中的cell侦另,同時(shí)也可以復(fù)用

屬性

屬性 說(shuō)明
name cell標(biāo)識(shí)符秩命,默認(rèn)是nil
enabled cell是否顯示
birthRate 每秒粒子的產(chǎn)生率,默認(rèn)是0
lifetime & lifetimeRange cell的生命周期 & 生命周期的范圍褒傅,都默認(rèn)是0弃锐,以秒為單位
emissionLatitude 指定緯度,維度角代表了x-z軸平面坐標(biāo)系中與x軸和z軸之間的夾角殿托,默認(rèn)是0
emissionLongitude 指定經(jīng)度霹菊,經(jīng)度角代表了x-y軸平面坐標(biāo)系中與x軸和y軸之間的夾角,默認(rèn)是0
emissionRange 發(fā)射角度范圍支竹,默認(rèn)是0
velocity & velocityRange 粒子的初始速度 & 范圍旋廷,都默認(rèn)是0
xAcceleration & yAcceleration & zAcceleration 在x、y礼搁、z軸上的重力加速度矢量饶碘,都默認(rèn)是0
scale 粒子在生命周期范圍內(nèi)的縮放比例,默認(rèn)是1
scaleRange 縮放比例范圍 馒吴,默認(rèn)是0扎运,負(fù)數(shù)縮小,正數(shù)放大
scaleSpeed 縮放速度饮戳,默認(rèn)是0
spin & spinRange 粒子的自旋轉(zhuǎn)速度 & 自旋轉(zhuǎn)角度范圍(弧度制)绪囱,都默認(rèn)是0
color 粒子的顏色
redRange & greenRange & blueRange & alphaRange 粒子的顏色RGBA能改變的范圍,默認(rèn)是0莹捡,范圍是[0,1]
redSpeed & greenSpeed & blueSpeed & alphaSpeed 粒子的顏色RGBA在生命周期內(nèi)改變的速度,都默認(rèn)是0扣甲,范圍是[0,1]
contents 粒子的內(nèi)容篮赢,設(shè)置為CGImageRef類(lèi)型的對(duì)象
contentsRect 粒子內(nèi)容的位置
contentsScale 粒子內(nèi)容的縮放比例
minificationFilter & magnificationFilter & minificationFilterBias 縮小 & 放大的過(guò)濾器
emitterCells 粒子中的粒子數(shù)組:即粒子也可以包含粒子
style 樣式

下面著重介紹下常用的屬性

  • lifetime:粒子生命周期,即存活時(shí)間琉挖,單位是秒
  • birthRate:粒子的產(chǎn)生率启泣,即每秒產(chǎn)生多少粒子的個(gè)數(shù)
  • contents:粒子的內(nèi)容,通常為CGImageRef的對(duì)象示辈,將提供的圖片從UIImage轉(zhuǎn)換為CGImageRef類(lèi)型
  • name:粒子的名字寥茫,即粒子的唯一標(biāo)識(shí),可以KVC通過(guò)name拿到粒子的需要修改的屬性
  • color:粒子的顏色矾麻,會(huì)結(jié)合contents的顏色來(lái)決定粒子的最終顏色纱耻,如果想完全通過(guò)color來(lái)控制cell的顏色芭梯,最好設(shè)置一張白色的圖片
  • redSpeed & greenSpeed & blueSpeed & alphaSpeed:color中RGBA的取值范圍,默認(rèn)還0弄喘,范圍是[0,1]玖喘,如果cell的color設(shè)置為[[UIColor colorWithRed:0.5 green:0.4 blue:0.5 alpha:1] CGColor];,在設(shè)置redSpeed & greenSpeed & blueSpeed & alphaSpeed全部為0.1蘑志,對(duì)應(yīng)的RGB取值范圍是R(0.1, 0.5)累奈、G(0.1,0.4 )、B(0.1, 0.5)急但、A(0.1, 1.0)
  • velocity & velocityRange: 粒子的初始速度和范圍
  • xAcceleration & yAcceleration & zAcceleration:分別是x澎媒、y、z軸上的加速度波桩,當(dāng)為正數(shù)時(shí)戒努,向坐標(biāo)軸的正方向加速,反之突委,向負(fù)方向加速
  • scale & scaleRange:粒子的縮放比例及范圍柏卤,縮放比例默認(rèn)是0,范圍是[0,1]

以下是實(shí)現(xiàn)的幾種的粒子效果圖示

  • 粽子雨匀油、紅包雨等粒子效果


    粽子雨缘缚、紅包雨等粒子效果
  • 點(diǎn)贊按鈕的粒子效果


    點(diǎn)贊粒子效果
  • 類(lèi)似煙花的粒子效果


    類(lèi)似煙花的粒子效果
  • 下雨的粒子效果


    下雨的粒子效果

以上的幾種效果的實(shí)現(xiàn)就不一一詳細(xì)說(shuō)明了.

粒子效果實(shí)現(xiàn)的一般步驟

接下來(lái)總結(jié)粒子效果實(shí)現(xiàn)的步驟:

  • 利用CAEmitterLayer創(chuàng)建粒子圖層layer,即發(fā)射源敌蚜,并添加到視圖的layer上
  • 設(shè)置發(fā)射源的屬性桥滨,例如:emitterShape、emitterMode弛车、emitterSize齐媒、emitterPosition等
  • 通過(guò)CAEmitterCell創(chuàng)建粒子cell
  • 設(shè)置粒子的相關(guān)屬性,例如contents纷跛、birthRate喻括、lifetime、speed等
  • 將粒子cell添加到發(fā)射源的emitterCells數(shù)組中

部分示例代碼如下:

- (void)zongZiRain{
//    1贫奠、設(shè)置CAEmitterLayer
    CAEmitterLayer *rainLayer = [CAEmitterLayer layer];
    
//    2唬血、在背景圖上添加粒子圖層
    [self.view.layer addSublayer:rainLayer];
    self.rainlayer = rainLayer;
    
//    3、發(fā)射形狀--線(xiàn)性
    rainLayer.emitterShape = kCAEmitterLayerLine;
    //發(fā)射模式
    rainLayer.emitterMode = kCAEmitterLayerSurface;
    //發(fā)射形狀的大小
    rainLayer.emitterSize = self.view.frame.size;
    //發(fā)射的中心點(diǎn)位置
    rainLayer.emitterPosition = CGPointMake(self.view.bounds.size.width*0.5, -10);
    
//    4唤崭、配置cell
    CAEmitterCell *cell = [CAEmitterCell emitterCell];
    //粒子圖片
    cell.contents = (id)[[UIImage imageNamed:@"zongzi2.jpg"] CGImage];
    //每秒鐘創(chuàng)建的粒子對(duì)象拷恨,默認(rèn)是0
    cell.birthRate = 1.0;
    //粒子的生存周期,以s為單位谢肾,默認(rèn)是0
    cell.lifetime = 30;
    //粒子發(fā)射的速率腕侄,默認(rèn)是1
    cell.speed = 2;
    //粒子的初始平均速度及范圍,默認(rèn)為0
    cell.velocity = 10.0f;
    cell.velocityRange = 10.0f;
    //y方向的加速度矢量,默認(rèn)是0
    cell.yAcceleration = 60;
    //粒子的縮放比例及范圍,默認(rèn)是[1,0]
    cell.scale = 0.05;
    cell.scaleRange = 0.0f;
    
//    5冕杠、添加到圖層上
    rainLayer.emitterCells = @[cell];
}

完整的代碼見(jiàn)Github - 12-CAEmitterLayer_實(shí)現(xiàn)粒子效果_OC

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末微姊,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子拌汇,更是在濱河造成了極大的恐慌柒桑,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,968評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件噪舀,死亡現(xiàn)場(chǎng)離奇詭異魁淳,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)与倡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)界逛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人纺座,你說(shuō)我怎么就攤上這事息拜。” “怎么了净响?”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,220評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵少欺,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我馋贤,道長(zhǎng)赞别,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,416評(píng)論 1 279
  • 正文 為了忘掉前任配乓,我火速辦了婚禮仿滔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘犹芹。我一直安慰自己崎页,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布腰埂。 她就那樣靜靜地躺著飒焦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪屿笼。 梳的紋絲不亂的頭發(fā)上荒给,一...
    開(kāi)封第一講書(shū)人閱讀 49,144評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音刁卜,去河邊找鬼。 笑死曙咽,一個(gè)胖子當(dāng)著我的面吹牛蛔趴,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播例朱,決...
    沈念sama閱讀 38,432評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼孝情,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼鱼蝉!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起箫荡,我...
    開(kāi)封第一講書(shū)人閱讀 37,088評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤魁亦,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后羔挡,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體洁奈,經(jīng)...
    沈念sama閱讀 43,586評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評(píng)論 2 325
  • 正文 我和宋清朗相戀三年绞灼,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了利术。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,137評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡低矮,死狀恐怖印叁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情军掂,我是刑警寧澤轮蜕,帶...
    沈念sama閱讀 33,783評(píng)論 4 324
  • 正文 年R本政府宣布,位于F島的核電站蝗锥,受9級(jí)特大地震影響跃洛,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜玛追,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評(píng)論 3 307
  • 文/蒙蒙 一税课、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧痊剖,春花似錦韩玩、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,333評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至叮贩,卻和暖如春击狮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背益老。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,559評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工彪蓬, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人捺萌。 一個(gè)月前我還...
    沈念sama閱讀 45,595評(píng)論 2 355
  • 正文 我出身青樓档冬,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子酷誓,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評(píng)論 2 345