一篇文章幫你了解AE動(dòng)畫插件Lottie的前世今生（附避坑案例）

大家好，我是彩云。在動(dòng)畫落地的過(guò)程中，配合Lottie插件輸出JSON動(dòng)畫文件是大家常用的方法。今天這篇分享，將會(huì)講到Lottie這個(gè)插件怎么來(lái)的，為什么會(huì)叫Lottie？使用過(guò)程中有哪些需要注意的？具體又該如何正確使用？如果你對(duì)這里面的知識(shí)不大熟悉，那這篇文章或許能幫到你。

我最近接手了一個(gè)新項(xiàng)目，團(tuán)隊(duì)想要做一些動(dòng)態(tài)圖標(biāo)和logo。

除了做用戶體驗(yàn)和UI設(shè)計(jì)之外，我還是一名動(dòng)效設(shè)計(jì)師，所以我接受了用AE和Lottie做動(dòng)畫的挑戰(zhàn)。

網(wǎng)頁(yè)動(dòng)畫歷史

在21世紀(jì)初，當(dāng)flash還是網(wǎng)頁(yè)動(dòng)畫之王時(shí)，每個(gè)設(shè)計(jì)師都在釋放他們的創(chuàng)意。那時(shí)候網(wǎng)上炫酷炸裂的網(wǎng)站隨處可見，只要你裝了flash播放器，就可以正常瀏覽。其中有些看起來(lái)更像游戲，當(dāng)時(shí)還沒(méi)有像現(xiàn)在這么多規(guī)范約束，做的都比較隨意。如果我們現(xiàn)在來(lái)分析它們，其中很多可能都沒(méi)有符合用戶體驗(yàn)設(shè)計(jì)原則。

隨著flash的消失，HTML成為使用標(biāo)準(zhǔn)以及用戶體驗(yàn)的規(guī)范化，那些網(wǎng)站消失了。現(xiàn)在我們?yōu)g覽的大多數(shù)網(wǎng)站都很容易使用，閱讀體驗(yàn)也很好……但它們看起來(lái)也很普通和相似。

在網(wǎng)頁(yè)上落地一個(gè)動(dòng)畫所付出的努力和工作實(shí)在是太高了，設(shè)計(jì)師做出的動(dòng)畫給到開發(fā)，能實(shí)現(xiàn)的效果非常有限。除了成本高和繁瑣外，從頭開始用代碼創(chuàng)建動(dòng)畫也會(huì)導(dǎo)致與設(shè)計(jì)稿相差甚遠(yuǎn)。直到Lottie出現(xiàn)，才迎來(lái)了轉(zhuǎn)機(jī)。

△ Lottie名字的由來(lái)

Lottie是怎么來(lái)的？

Hernan Torrisi在2015年提出了在AE中導(dǎo)出動(dòng)畫的想法，使用他創(chuàng)建的一個(gè)叫Bodymovin的插件，能夠?qū)С鯦SON描述的動(dòng)畫。

他還發(fā)布了史上第一個(gè)支持該格式的渲染器，并為瀏覽器提供了一個(gè)基于JS的播放器。

在2017年，Airbnb的工程師看到了基于JSON的動(dòng)畫潛力，編寫了可以渲染JSON文件的iOS和Android庫(kù)，他們稱之為「Lottie」。

Airbnb的開發(fā)者將其作為一個(gè)開源平臺(tái)，不僅是為了免費(fèi)發(fā)布，也是為了打造一個(gè)社區(qū)。他們創(chuàng)建了一個(gè)github地址（https://github.com/lottiefiles）來(lái)與設(shè)計(jì)師和開發(fā)進(jìn)行交流。這是一個(gè)與時(shí)俱進(jìn)的好主意，使得Lottie得到快速發(fā)展。

LottieFiles是什么？

LottieFiles（https://lottiefiles.com/）是一個(gè)獨(dú)立于Airbnb的平臺(tái)，設(shè)計(jì)師可以在上面「上傳，測(cè)試，購(gòu)買和下載動(dòng)畫」，而這些只需要你有一個(gè)免費(fèi)的賬號(hào)。

LottieFiles同時(shí)也是一個(gè)AE的插件跟Bodymoving類似，只是功能更加豐富，允許我們「預(yù)覽」動(dòng)畫，「上傳到」LottieFiles平臺(tái)，保存到我們的電腦上，等等。

作為插件的時(shí)候其實(shí)是比Bodymoving功能更為豐富一些，但彩云實(shí)際測(cè)試的時(shí)候發(fā)現(xiàn)，可能會(huì)由于網(wǎng)絡(luò)問(wèn)題導(dǎo)致刷新預(yù)覽不及時(shí)的問(wèn)題，這個(gè)大家可以在用的時(shí)候留意下。彩云給大家找了一個(gè)演示視頻，一起看看吧。

如何入門？

首先，你需要安裝好插件，可以裝Bodymovin或者LottieFile（https://lottiefiles.com/plugins/after-effects）

在項(xiàng)目的中間階段，我沒(méi)有太多時(shí)間去研究它，但我又希望能立馬就用上。所以，我覺(jué)得先按自己的想法快速試一遍，而不是去官網(wǎng)一條條的看說(shuō)明。我設(shè)計(jì)了一個(gè)簡(jiǎn)單的logo動(dòng)畫，這是一個(gè)擁有螺旋槳的無(wú)人機(jī)，我從Ai導(dǎo)入AE，并用3D圖層做了一個(gè)旋轉(zhuǎn)動(dòng)畫。

△ Logo動(dòng)畫

當(dāng)我準(zhǔn)備導(dǎo)出它時(shí)，AE給我彈了一堆錯(cuò)誤信息。我發(fā)現(xiàn)并非所有效果都能被支持。直到今天，3D圖層依然不被支持。所以，在做之前，最好根據(jù)規(guī)范確認(rèn)下，哪些動(dòng)畫可以被支持，哪些不支持。有時(shí)候，一些動(dòng)畫在web端支持，但在iOS和Android上卻不被支持。

△?Lottie支持表

使用技巧及建議

為web創(chuàng)建動(dòng)畫并不像傳統(tǒng)視頻動(dòng)畫那樣，我們需要考慮幾個(gè)我們從未考慮過(guò)的設(shè)置和格式選項(xiàng)。

下面是Lottie的作者給出的一些建議

• 保持簡(jiǎn)單：JSON文件應(yīng)該盡可能的簡(jiǎn)潔和保持小的體積
• 利用好AE的能力盡可能的減少額外的關(guān)鍵幀，例如多使用子父級(jí)方式而不是在每一個(gè)層上都添加一遍關(guān)鍵幀
• 避免使用路徑關(guān)鍵幀，因?yàn)樗鼈儠?huì)創(chuàng)建一個(gè)非常大的文檔，會(huì)從路徑上轉(zhuǎn)換所有的頂點(diǎn)
• 避免使用Wiggle表達(dá)式和自動(dòng)追蹤等技術(shù)，這些技術(shù)會(huì)產(chǎn)生大量的關(guān)鍵幀，做出這么大的文件可能會(huì)使用JSON文件變得非常大，從而對(duì)性能產(chǎn)生大的負(fù)面影響。
• 在AE中需要將任何Ai，EPS，SVG或PDF圖層轉(zhuǎn)換為形狀圖層，否則會(huì)產(chǎn)生錯(cuò)誤。
• 導(dǎo)出文件時(shí)，以1倍圖導(dǎo)出，圖形上的每個(gè)像素都將轉(zhuǎn)換成iOS和Android的點(diǎn)單位。這是Google匯總的DPS中的設(shè)備指標(biāo)的「集合」 （https://material.io/resources/devices/），擔(dān)心大家打不開網(wǎng)頁(yè)，彩云貼心的為大家制作好了這份對(duì)照表，文末有獲取方式。
• Lottie還不支持任何表達(dá)式或效果。
• 蒙版或者alpha蒙版應(yīng)該盡可能的小，它們的大小將影響Lottie的性能，所以最好避免出現(xiàn)它們或保持它們最小。
• 混合模式，如疊加，屏幕，相加還不支持。
• 圖層樣式，如投影，描邊都還不被支持
• 空?qǐng)D層可以使用，但為了讓它正常工作，我們需要將可見打開，并將透明度設(shè)置為0。

案例演示

接下來(lái)我將通過(guò)一個(gè)實(shí)際案例，一步一步教大家如何使用Lottie.

導(dǎo)入圖層，打開合成，選擇所有圖層，右鍵單擊，選擇從矢量圖層創(chuàng)建形狀。這將會(huì)創(chuàng)建出新的矢量圖層，不至于在我們導(dǎo)出Lottie時(shí)給我們制造麻煩。

△?轉(zhuǎn)換圖層

我們需要?jiǎng)h除所有AI文件，只保留新創(chuàng)建出的矢量圖層。

△?矢量圖層

我想為L(zhǎng)ogo做出3D的旋轉(zhuǎn)動(dòng)畫，但因?yàn)樗恢С郑晕也坏貌挥脗鹘y(tǒng)的方式來(lái)模擬，我通過(guò)在x軸上改變寬度來(lái)模擬3D旋轉(zhuǎn)產(chǎn)生的變化。

△?X軸方向上的縮放動(dòng)畫

在我得到了想要的旋轉(zhuǎn)動(dòng)畫以后，我創(chuàng)建了一個(gè)空對(duì)象來(lái)移動(dòng)整個(gè)Logo，并使其「起飛」和「降落」。我在移動(dòng)過(guò)程中使用了曲線，使得移動(dòng)更加平滑。

△?空對(duì)象的位移路徑

正如我們之前寫到的：空對(duì)象需要被轉(zhuǎn)換為「可見」和「0%透明度」才能正常工作。

當(dāng)我把動(dòng)畫調(diào)整到我想要的效果后，接下來(lái)就用到了Lottie插件了。

△?打開Lottie插件

打開界面后，可以查看動(dòng)畫，上傳lottie文件和將它保存到電腦上。為了做到這一點(diǎn)，需要有一個(gè)Lottiefiles賬號(hào)。（彩云注：這一點(diǎn)來(lái)說(shuō)，LottieFile插件會(huì)比Bodymovin功能要更全，LottieFile里面還提供了大量的免費(fèi)模板哦）。

△?Lottie 插件

總結(jié)

通過(guò)這種方式來(lái)創(chuàng)建動(dòng)畫的方法是非常令人興奮的，因?yàn)樗３至撕芨叩馁|(zhì)量，易于實(shí)現(xiàn)，并給我們創(chuàng)造亮點(diǎn)的產(chǎn)品提供了條件。

因?yàn)槲覀兪菫轫?yè)面打造的動(dòng)畫形式，而不是做一個(gè)動(dòng)畫視頻，這里面需要適應(yīng)和理解新媒體，我們需要清楚能做什么以及限制是什么。

我相信在未來(lái)，我們將能夠添加更多的特性到動(dòng)畫里，但就目前而言，最好保持簡(jiǎn)單。要記住一個(gè)設(shè)計(jì)原則，在很多情況下，少即是多。

彩云補(bǔ)充

提到lottie插件，就不得不提安裝的問(wèn)題。這里彩云給大家安利一個(gè)很方便實(shí)用的小工具，叫ExtensionManager，有mac和win版本，對(duì)于Adobe系列的軟件插件，安裝管理起來(lái)非常方便，直接拖進(jìn)去就OK了。

插件安裝神器+尺寸對(duì)照表+Lottie安裝包的文件，鏈接: https://pan.baidu.com/s/1YWGsIoPQFGp86_Y3tV9ctw 提取碼: ruig

備用下載鏈接：https://share.weiyun.com/rFevqmFM

更多Lottie 教程：

歡迎關(guān)注譯者的微信公眾號(hào)：「彩云譯設(shè)計(jì)」