Lottie在實戰專案中落地經驗分享

如果你也希望能把Lottie製作動效的方式用在實際專案中，希望我的這篇文章能給你一些啟發

相信大家對Lottie並不陌生，它是Airbnb 開發的面向 iOS、Android、React Native 的動畫庫，設計師只需要在 After Effects 設計出想要的動畫，然後匯出成 JSON檔案交給開發工程師，開發工程師就可以將動畫 100% 還原到你的產品中。

“100%還原動畫”“降低開發成本”聽起來彷彿很美好，我也是寄希望Lottie能解決welcome page裡的動效。但是我在前期跟開發工程師初步探索Lottie後發現，它 僅支援AE裡繪製的形狀動效 ，在實際的UI專案中，如果限制設計師用AE裡繪製形狀圖層的方式去做頁面，對設計師的表現來說是一種掣肘。

直到今年5月，在封面新聞4.0版本里，底部tab欄優化中Lottie派上了用場。先附上優化前後對比圖。

底部tab欄是使用者高頻操作區域，適當增加點選時的微互動可以 讓使用者更容易感知到自己在app中所在的位置 ，而且俏皮的動效也能 帶給使用者情感化的體驗 。最重要的是，tab欄點選的動效是一種微互動，它通過icon的大小、位置、透明度等屬性改變而形成，Lottie完全能承載這些屬性的變化。

下面就介紹一下具體的實操步驟。

一：在設計稿中對圖示的大小做好標註。

具體的開發實現工程中，只有動起來的那部分是靠Lottie實現的，tab欄icon點選前後的靜態圖還是按照設計規範來切圖和標註。

這一步很重要，在AE裡新建合成的大小跟靜態切圖的大小一定是等比例的，不然會出現動效和靜態圖無法重合的問題。

二：在AE裡新建合成重新繪製圖形

我給開發工程師的靜態圖是按照69px*69px的大小切的，我在AE裡新建的合成是330px*330px(方便操作的大小即可），為了靜態圖與動效對齊，我把靜態圖等比例放大到330px，把圖片拖到AE檔案裡作為底圖，我直接在AE裡繪製形狀，繪製時注意與底圖保持一致。

三：製作icon動效

我預想的動效是從左至右展開icon。通過“修剪路徑”工具可以實現。在圖層下點選“新增—-修剪路徑”，調整結束和開始的位置，每個形狀圖層都需要分開調整。

四：生成預合成放在整體頁面中微調

這一步可以從整體頁面上觀察做出來的動效是否OK，最開始我是想每一個icon的動效都不同，但實際效果並不好。我又返回去調整再觀察再調整直致滿意為止。

四：用bodymovin匯出每一個icon的動效

整體效果OK後，就可以分開把每個預合成裡的icon動效匯出成json檔案，“視窗——擴充套件——bodymoving”會開啟一個操作框，選擇好匯出檔案的地址，點選"render"按鈕，就可以生成對應的json檔案啦～

希望之後能有更多的實際場景能用Lottie去實現動效，也希望這個Lottie這個產品本身能迭代地更好。如果你也希望能把Lottie製作動效的方式用在實際專案中，希望我的這篇文章能給你一些啟發，也歡迎大家一起來討論。

這篇文章對Lottie支援的AE屬性和軟體的安裝都有詳細的介紹，推薦。http://www.ui.cn/detail/199429.html