AE 動(dòng)畫(huà)直接變?cè)a：Airbnb 發(fā)布開(kāi)源動(dòng)畫(huà)庫(kù) Lottie（本文適合中級(jí)設(shè)計(jì)師閱讀）
我們常常會(huì)在各大設(shè)計(jì)網(wǎng)站看到一些很炫酷的動(dòng)效設(shè)計(jì)，然而Android、iOS、React Native 上實(shí)現(xiàn)一套復(fù)雜動(dòng)畫(huà)是一件蠻困難而且耗時(shí)的事。開(kāi)發(fā)者們不僅要為各種屏幕尺寸加載一大堆素材，還得寫(xiě)成百上千行生硬、難維護(hù)的代碼。正因如此，絕大部分 App 都不愿意使用動(dòng)畫(huà)。
但是當(dāng)Airbnb發(fā)布了Lottie以后，徹底的改變了動(dòng)效的實(shí)現(xiàn)方法。Lottie 是一個(gè)面向 iOS、Android、React Native 的動(dòng)畫(huà)庫(kù)，能給實(shí)時(shí)繪制 After Effects 動(dòng)畫(huà)并且讓原生 App 像使用靜態(tài)素材一樣使用這些動(dòng)畫(huà)。通過(guò)插件 Bodymovin，Lottie 可以直接解析 AE 導(dǎo)出的 JSON 文件，并且插件內(nèi)置的 Javas cript 圖層可以將動(dòng)畫(huà)直接在 Web 上運(yùn)行。自2015年2月起，Bodymovin 的創(chuàng)始人 Hernan Torrisi 就一直在優(yōu)化這個(gè)插件，以得到更好的功能。
我們先來(lái)看下Airbnb官網(wǎng)實(shí)現(xiàn)的一些動(dòng)效案例
接下來(lái)我們來(lái)場(chǎng)實(shí)戰(zhàn)教學(xué)，不過(guò)在做實(shí)戰(zhàn)之前我們要清楚動(dòng)效的實(shí)現(xiàn)都有哪幾種方式？不是所有的動(dòng)效都可以用Lottie來(lái)實(shí)現(xiàn)，接下來(lái)我來(lái)簡(jiǎn)單的介紹下動(dòng)效實(shí)現(xiàn)的方式都有哪些。
方法1：標(biāo)注圖（重點(diǎn)用于一些復(fù)雜的交互，需要詳細(xì)標(biāo)注時(shí)間，變化屬性，動(dòng)效緩動(dòng)）
方法2：Lottie輸出json文件（多用于一些loading、點(diǎn)贊等）
方法3：視頻/序列幀/Gif（視頻-用于一些視頻直播類(lèi)的禮物動(dòng)效? 序列幀-常用于一些要求較低無(wú)法通過(guò)代碼來(lái)實(shí)現(xiàn)的效果? ? Gif-同序列幀效果，但是相對(duì)于序列幀來(lái)說(shuō)Gif會(huì)出現(xiàn)卡頓的情況）
今天我們只針對(duì)如何運(yùn)用Lottie實(shí)現(xiàn)落地動(dòng)效做講解。實(shí)戰(zhàn)馬上開(kāi)始，先來(lái)讓我們看一張圖
首先我們使用ai軟件新建一個(gè)800x600大小的文件 并且把動(dòng)效中出現(xiàn)的幾個(gè)圖標(biāo)分別采用描邊的方式繪出，并且疊在同一區(qū)域，注意每個(gè)圖標(biāo)是一個(gè)單獨(dú)的圖層（后期我們要在AE里面針對(duì)每個(gè)圖標(biāo)做動(dòng)效）
做完之后我們保存ai文件，然后打開(kāi)AE軟件雙擊導(dǎo)入ai文件并且轉(zhuǎn)為預(yù)合成（我們只針對(duì)聊天圖標(biāo)做動(dòng)效，其它圖標(biāo)重復(fù)此操作即可）
操作窗口選中文件右擊選擇“從適量圖層創(chuàng)建形狀”
點(diǎn)擊“聊天”輪廓前面的小箭頭展開(kāi)形狀圖層
點(diǎn)擊“添加”修剪路徑（位于“內(nèi)容”橫排的后面 有一個(gè)播放小按鈕）
點(diǎn)擊“修剪路徑”前面的箭頭展開(kāi)操作區(qū) 在0s的位置添加開(kāi)始關(guān)鍵幀0%在1s位置添加開(kāi)始關(guān)鍵幀100%，當(dāng)前“聊天圖標(biāo)”便可以通過(guò)修剪路徑的方式實(shí)現(xiàn)想要的動(dòng)效效果
動(dòng)效做完了。
接下來(lái)我們我們?cè)贏E中來(lái)安裝Bodymovin插件，用于導(dǎo)出開(kāi)發(fā)所需要的json文件，首先通過(guò)我附件給出的這兩個(gè)文件先安裝第一個(gè)安裝器之后把第二個(gè)文件拖入安裝器完成安裝。
提示安裝成功之后，并在AE軟件首選項(xiàng)_常規(guī)中“在允許腳本寫(xiě)入web腳本和訪問(wèn)網(wǎng)絡(luò)”打鉤。安裝之后在窗口_擴(kuò)展中找到Bodymovin插件
先選中要導(dǎo)出的動(dòng)畫(huà)其次點(diǎn)擊設(shè)置圖標(biāo)
在設(shè)置頁(yè)面勾選以下兩項(xiàng)后選擇保存
然后點(diǎn)擊渲染動(dòng)畫(huà)，顯示100%就成功了（注意100%就成功了當(dāng)前進(jìn)度條還存在，但是實(shí)際上已經(jīng)渲染完成了）
此時(shí)在桌面生成html預(yù)覽文件這個(gè)可以用瀏覽器打開(kāi)可以看到預(yù)覽的效果，其次生成一個(gè)json文件這個(gè)是交給開(kāi)發(fā)的。這樣我們就大功告成了
最后在文末貼一張Lottie無(wú)法實(shí)現(xiàn)的效果列表
