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

我最近接手了一個新項目，團隊想要做一些動態圖標和logo。

除了做用戶體驗和UI設計之外，我還是一名動效設計師，所以我接受了用AE和Lottie做動畫的挑戰。

網頁動畫歷史

在21世紀初，當flash還是網頁動畫之王時，每個設計師都在釋放他們的創意。那時候網上炫酷炸裂的網站隨處可見，只要你裝了flash播放器，就可以正常瀏覽。其中有些看起來更像游戲，當時還沒有像現在這么多規范約束，做的都比較隨意。如果我們現在來分析它們，其中很多可能都沒有符合用戶體驗設計原則。

隨著flash的消失，HTML成為使用標準以及用戶體驗的規范化，那些網站消失了。現在我們瀏覽的大多數網站都很容易使用，閱讀體驗也很好……但它們看起來也很普通和相似。

在網頁上落地一個動畫所付出的努力和工作實在是太高了，設計師做出的動畫給到開發，能實現的效果非常有限。除了成本高和繁瑣外，從頭開始用代碼創建動畫也會導致與設計稿相差甚遠。直到Lottie出現，才迎來了轉機。

△ Lottie名字的由來

Lottie是怎么來的？

Hernan Torrisi在2015年提出了在AE中導出動畫的想法，使用他創建的一個叫Bodymovin的插件，能夠導出JSON描述的動畫。

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

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

Airbnb的開發者將其作為一個開源平臺，不僅是為了免費發布，也是為了打造一個社區。他們創建了一個github地址（https://github.com/lottiefiles）來與設計師和開發進行交流。這是一個與時俱進的好主意，使得Lottie得到快速發展。

LottieFiles是什么？

LottieFiles（https://lottiefiles.com/）是一個獨立于Airbnb的平臺，設計師可以在上面「上傳，測試，購買和下載動畫」，而這些只需要你有一個免費的賬號。

LottieFiles同時也是一個AE的插件跟Bodymoving類似，只是功能更加豐富，允許我們「預覽」動畫，「上傳到」LottieFiles平臺，保存到我們的電腦上，等等。

作為插件的時候其實是比Bodymoving功能更為豐富一些，但彩云實際測試的時候發現，可能會由于網絡問題導致刷新預覽不及時的問題，這個大家可以在用的時候留意下。彩云給大家找了一個演示視頻，一起看看吧。

如何入門？

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

在項目的中間階段，我沒有太多時間去研究它，但我又希望能立馬就用上。所以，我覺得先按自己的想法快速試一遍，而不是去官網一條條的看說明。我設計了一個簡單的logo動畫，這是一個擁有螺旋槳的無人機，我從Ai導入AE，并用3D圖層做了一個旋轉動畫。

△ Logo動畫

當我準備導出它時，AE給我彈了一堆錯誤信息。我發現并非所有效果都能被支持。直到今天，3D圖層依然不被支持。所以，在做之前，最好根據規范確認下，哪些動畫可以被支持，哪些不支持。有時候，一些動畫在web端支持，但在iOS和Android上卻不被支持。

△?Lottie支持表

使用技巧及建議

為web創建動畫并不像傳統視頻動畫那樣，我們需要考慮幾個我們從未考慮過的設置和格式選項。

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

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

案例演示

接下來我將通過一個實際案例，一步一步教大家如何使用Lottie.

導入圖層，打開合成，選擇所有圖層，右鍵單擊，選擇從矢量圖層創建形狀。這將會創建出新的矢量圖層，不至于在我們導出Lottie時給我們制造麻煩。

△?轉換圖層

我們需要刪除所有AI文件，只保留新創建出的矢量圖層。

△?矢量圖層

我想為Logo做出3D的旋轉動畫，但因為它不支持，所以我不得不用傳統的方式來模擬，我通過在x軸上改變寬度來模擬3D旋轉產生的變化。

△?X軸方向上的縮放動畫

在我得到了想要的旋轉動畫以后，我創建了一個空對象來移動整個Logo，并使其「起飛」和「降落」。我在移動過程中使用了曲線，使得移動更加平滑。

△?空對象的位移路徑

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

當我把動畫調整到我想要的效果后，接下來就用到了Lottie插件了。

△?打開Lottie插件

打開界面后，可以查看動畫，上傳lottie文件和將它保存到電腦上。為了做到這一點，需要有一個Lottiefiles賬號。（彩云注：這一點來說，LottieFile插件會比Bodymovin功能要更全，LottieFile里面還提供了大量的免費模板哦）。

△?Lottie 插件

總結

通過這種方式來創建動畫的方法是非常令人興奮的，因為它保持了很高的質量，易于實現，并給我們創造亮點的產品提供了條件。

因為我們是為頁面打造的動畫形式，而不是做一個動畫視頻，這里面需要適應和理解新媒體，我們需要清楚能做什么以及限制是什么。

我相信在未來，我們將能夠添加更多的特性到動畫里，但就目前而言，最好保持簡單。要記住一個設計原則，在很多情況下，少即是多。

彩云補充

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

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

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

更多Lottie 教程：

歡迎關注譯者的微信公眾號：「彩云譯設計」