在動畫還原上，設計師和開發都碰到過以下問題：
設計師即使輸出完整的動畫參數說明，使用代碼還原動效還原仍然會有偏差
有了大殺器Lottie和Bodymovin，可以完美解決以上問題，讓我用一個詞來形容Lottie+Bodymovin組合，那就是「省心」。
Lottie是Airbnb開源的一套跨平臺（Web、IOS、Android、React Native）的動畫庫，設計師在Adobe Effect製作動畫之後，使用Lottie提供Bodymovin（AE插件）將動畫導出帶有矢量動畫信息的Json文件，最後開發將Json文件放入App項目中，就可以將動畫100%還原到產品中。對於不同的工作角色，Lottie+Bodymovin提供一套完整動畫解決方案：設計師，百分百還原設計師的腦洞和創意，相信這是對設計師的最好嘉獎開發，拋棄臃腫的代碼，如今只需要簡單導入和有限的代碼就可以完成動畫開發對於不同設備，開發小哥哥可以關注下面的項目了解進行實現——Web頁面，通過Airbnb的開源項目「lottie-web」（https://github.com/airbnb/lottie-web）實現Android原生，通過Airbnb的開源項目「lottie-android」（https://github.com/airbnb/lottie-android）實現IOS原生，通過Airbnb的開源項目「lottie-ios」（https://github.com/airbnb/lottie-ios）實現React Native，通過Airbnb的開源項目「lottie-react-native」（https://github.com/react-native-community/lottie-react-native）實現
下面重點介紹下AE插件Bodymvin的安裝～～
首先你的電腦已經安裝了AE，如果你的AE打開了，在安裝之前先將AE關閉。
第一步，安裝ZXP，為安裝Bodymovin插件到AE做準備。下載地址：https://aescripts.com/learn/zxp-installer/下載地址：https://github.com/airbnb/lottie-web/tree/master/build/extension
然後打開第一步下載的ZXP，將Bodymovin拖動進去。
第三步，打開AE，AE進行允許AE使用腳本設置，操作如下：
點擊「After Effects CC > 首選項 > 常規」「Mac OS：快捷鍵Command+Option+;(分號)；Win：Ctrl+Alt+;(分號)」，選中「允許腳本寫入文件和訪問網絡」，點擊確定。
第四步，選擇AE窗口 > 擴展 > Bodymovin，打開Bodymovin窗口。
第五步，先選擇你要導出動畫的存儲路徑，然後點擊渲染即可將你選擇的合成動畫導出為Json文件。輸出Json後，此時點擊左上角的預覽（preview）按鈕，拖動下面的滑塊進行預覽。可以點擊左上角的預覽（preview）按鈕，點擊「Browse」可選擇本地的Json文件進行預覽，點擊「Current Renders"對當前合成動畫進行預覽。動畫非自動播放，要拖動下面的滑塊進行預覽。
最後，將導出的Json文件或Json+images文件發給開發小哥哥去實現啦～～
前面有提到最後導出的可能是Json文件，也可能是Json文件加一個images包，所以分2種情況，如果在AE裡直接繪製素材並製作動畫，用Bodymovin導出的只是一個Json文件；如果在AE中導入外部素材製作動畫，除了Json文件之外，還會有一個images圖片包生成，這個包包含了動畫中的所有圖片素材。需求背景是需要首頁金剛區2個Icon入口（分別是支付寶支付和微信支付）合併為1個Icon入口，要素依然需要保留，同時需要讓用戶一看就知道這塊功能是行動支付的入口。其中一個方案是採用Logo平滑過渡的方式，預覽效果如下：最後用Bodymovin導出的就只有一個Json文件。外部素材可以是ps文件、ai文件或者是png文件。所有素材都是事先用ps繪製好再導入到AE中去製作動畫的。
綜上，通過Lottie+Bodymovin來還原動畫是非常省心的。
需要注意的一點是Lottie和Bodymovin還有一點點小瑕疵，小部分AE屬性在各平臺存在兼容問題，也就是在AE裡頭直接繪製使用的某些屬性在一些平臺不能被解析和還原，我在附錄中附上了Lottie和Bodymovin支持導出的AE屬性列表，不被支持的屬性可以先避免使用。
不過，引用外部素材的話就可以放心使用了，所以有些AE不被支持的屬性效果可以在PS或AI繪製好再導入AE中作為素材製作動畫。
Lottie和Bodymovin支持導出的AE屬性。該表格英文版見：http://airbnb.io/lottie/#/supported-features