（轉）用Lottie制作動畫,我的月薪翻了一番!！
Lottie是Airbnb發布的開源動畫庫. 幫助動效落地。學會使用Lottie,會極大地提高工作效率。
Lottie是一種新的開發動畫的方式. 學會使用Lottie,會極大改善你和開發小哥哥撕逼的情況, 因為動畫我們都給做好了他只需要給播放一下就好了!! 下面的效果可以輕松實現.
官網地址：https://airbnb.design/lottie/
Lottie的優勢
1. 開發無需編寫動畫,只需加載
2. Android, iOS, 和React Native多平臺支持
3. Path,flat等風格動畫實現完美
4. 可手動設置進度,綁定手勢,事件等
5. 可網絡加載,動態控制播放速度等
6. 性能好,顯示效果完
...
Lottie的劣勢
1. 能在AE中實現的效果非常有限
2. 對AE使用要求高一點, 動畫更加依賴設計師
3. 使用位圖後,資源消耗大
...
了解Lottie的應用範圍
首先我們得知道Lottie的邊界在哪裏,是否采用這個方案,制作的動畫能不能完美實現,那麽我們必須從文檔開始
1. 對Android和iOS的支持範圍(這和我們的產品要覆蓋的用戶群體息息相關)
1) Lottie支持API 16及以上版本(也就是Android版本至少得是4.1 Jelly Bean糖豆)
2) Lottie支持iOS 8+
2. 了解支持的AE特性(**我大概總結下)**
1) 基本的形狀都支持.填充支持漸變,
2) mask 大部分混合效果不支持(少用mask,影響性能)
3) Mattes 用alpha matte就好(少用,影響性能)
4) merge Path(合並路徑) 也盡量避免使用,應用Android只支持4.4以上,iOS都不支持.
5) 圖層效果和效果等都幾乎不支持哦
6) 文字最好在轉動畫前就轉為形狀(因為iOS不支持)
7) 表達式不支持
8) 預合成現在已經支持
...
從AE開始
1. 安裝必備的工具
After Effects(盡量選擇17以後的版本)
原版Bodymovin(如何安裝插件網上已經很多,只是老版本AE和新版AE安裝方式有些區別,這個插件價格你自己定,填0就是免費!!!),這裏同時有個漢化版本的漢化版Bodymovin
下載 Lottiefiles preview app(這個Android版本的app功能要更強大一些)
2. 安裝bodymovin插件
插件下載地址已經在上面提到了,選擇哪個版本看你,我一般都選新的. 下載下來格式是後綴為.zxp的文件,這裏我們需要安裝一個Adobe官方的插件管理工具 ZXP Installer進行安裝, 這個很簡單,但是不知道我安裝後無法識別到我電腦上的ae軟件.
Mac OS上安裝
1.將.zxp文件重命名為.zip
2. 解壓縮zip文件
3. 在Finder(訪達)中 使用快捷鍵 ?+shift+G,輸入 ~/Library/Application Support/Adobe/CEP/extensions 到達相應文件夾
4. 將剛剛的解壓的文件移入這個文件夾
Windows上安裝
1. 將.zxp文件重命名為.zip
2. 解壓縮zip文件
3. 將解壓文件夾拖入 C:/Program Files(x86)/Common Files/Adobe/CEP/extensions/
4. 在HKEY_CURRENT_USER/Software/Adobe/CSXS.5中創建一個註冊表項“PlayerDebugMode”，其字符串值為1（要創建和修改註冊表項，您可以在Windows菜單中搜索“regedit”程序）
3. 這個是我制作的一個AE動畫
可以看到我基本是用的AE的五大屬性(位置,縮放,旋轉,透明度,錨點)以及修剪路徑,和路徑做的動畫,因為我看了Lottie的文檔知道這樣去做最為安全
4. 表達式轉為關鍵幀
剛剛截圖也發現,我有用表達式. Lottie本身不支持表達式的. 但是一些微動效果(比如抖動這類),我們用表達式做出來更方便,效果更好.這裏有個插件能將表達式烘焙轉為關鍵幀,那麽也就解決我們的問題了.
下載表達式烘焙插件 Easy Bak
將下載文件夾中的Easy Bake.jsxbin文件移入/Applications/Adobe After Effects CC 2018/Scripts/ScriptUI Panels中,然後打開AE-首選項-常規-允許腳本寫入文件和訪問網絡.這樣你的插件才可以正常工作.
安裝的插件會出現在紅色的位置
打開你的AE文件中的合成, 點擊Bake(其它不用調節), 完成可以看到,所以表達式都被關閉,替代他們的是排列緊密的關鍵幀.關鍵這個插件還可以Unbake,點擊就可還原表達式,屌不屌!!!
5. 導出Lottie需要的json文件
這裏我們的動畫部分都基本完成了, 整個動畫是圖標變換
這裏需要使用到第二個工具 bodymovin,這裏我用漢化版(前面有提到下載地址)來說明:
選擇要導出的合成,進入設置
這個漢化版已經說明了每個選項的作用了, 按照我之前聽過一個大佬說過,軟件如果有默認選項,那麽選默認總是沒錯的. 這裏我們之間選擇默認的第二個,其它只是特殊需求情況下需要改選的.
點擊渲染, 這裏我保存在桌面, 出現了一個後綴.json的文件
不要關閉軟件,我們先預覽看看,依舊使用這個插件,旁邊的 預覽按鈕
拖動下面的按鈕,查看真個幀率下,顯示是否正常.
最好利用官網的預覽功能再次查看(因為涉及到平臺,你得在iOS和Android下查看),打開Lottiefile 進行預覽
之後用你的手機,掃描右邊的二維碼進行預覽(商店搜索Lottie Preview,分別用Android和iOS進行測試),如果動畫有問題,繼續回去看看AE用了什麽不支持的屬性,然後調整輸出,重新導出,再次檢測.
到這裏,整個Lottie的動畫導出就結束了.接下來只要將你的json文件交付給開發小哥哥就好了, 他們會在代碼中添加Lottie庫來加載我們制作的動畫.下圖是本人用framer實現的實際原型效果(後面可能會出相關教程哦) 
需要的插件, 在公眾號回復 Lottie插件 即可下載
更多設計幹貨與資訊, 盡在海華社Hiwow, 不關註血虧。
（轉）用Lottie制作動畫,我的月薪翻了一番!！