基于CAEmitterLayer實(shí)現(xiàn)一些動(dòng)畫效果

起因

?昨天在群里看到一個(gè)安卓的好友分享了一個(gè)比較有意思的動(dòng)畫,有點(diǎn)類似直播平臺上的“冒泡”效果的粒子動(dòng)畫,感覺挺不錯(cuò)的,趕巧前段時(shí)間在看一個(gè)開源App的時(shí)候也看到一個(gè)類似的,因此正好拿出來練練手。

基礎(chǔ)

?iOS相對于安卓平臺,動(dòng)畫一直是其強(qiáng)項(xiàng),因此要實(shí)現(xiàn)類似的效果,代碼也是相對容易。因此只要學(xué)會(huì)一個(gè)CAEmitterLayer就可以了,是不是很簡單?

概況

?CAEmitterLayer是官方基于Core Animation實(shí)現(xiàn)的粒子發(fā)生器系統(tǒng)。其中的每個(gè)粒子又都是一個(gè)CAEmitterCell的實(shí)例。在該系統(tǒng)中,粒子繪制在背景色與border之上。其本身繼承自CALayer,用法自然也和CALayer基本一次。

圖1(CAEmitterLayer簡介)

?CAEmitterCell在粒子系統(tǒng)中作為粒子的實(shí)體,本身繼承自NSObject,通過它和CAEmitterLayer的組合,就很容易實(shí)現(xiàn)一些炫酷的功能。

常見屬性簡介

? 本來這部分想自己寫的,但是突然在網(wǎng)上看到了一篇相似的博客,發(fā)現(xiàn)作者實(shí)現(xiàn)寫得太詳細(xì)了,我實(shí)在沒有必要再閉門造車,大家如果有興趣就自己去看看:傳送門

動(dòng)畫實(shí)現(xiàn)

?基礎(chǔ)不用講了,那就直接上代碼吧。

?寫到這里都不知道該寫些什么,因?yàn)檫@個(gè)Demo本身也沒有什么難度,對于iOS開發(fā)者來說僅僅是一個(gè)控件的學(xué)習(xí),所以就不廢話了,直接貼上代碼:

圖二(代碼1::生成CAEmitterLayer實(shí)例)
圖3(代碼2:生成CAEmitterCell實(shí)例)
圖4(代碼3:調(diào)用方法)
圖5(效果1)

?整個(gè)CAEmitterLayer使用大概這樣的流程,入門還是很簡單,如果想做出更好的效果,大家就自己去動(dòng)手嘗試吧。

完整的Demo戳我

擴(kuò)展閱讀

Apple Developer

超級詳細(xì)的屬性介紹(傳送門)

可動(dòng)態(tài)查看屬性影響的可視化工具

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容