Lottie - 讓動畫的實現變得如此簡單
疫情期間，在線生活迎來爆發 ，視頻行業成了廣大網民放松娛樂和了解疫情、學習防護知識的重要平臺。
短視頻行業的日活用戶規模較平日增加 16.7%，日人均使用時長較平日增加 9.3%。長視頻成為很多網友在家消磨時間的方式。騰訊視頻獨播劇《三生三世枕上書》和芒果TV 獨播劇《下壹站是幸福》，更是讓平臺日活分別增加 22% 和 26%。
可以說，視頻行業的利好趨勢，基本上不受疫情影響。短期內疫情會帶來較大增幅，但是疫情過去之後還會保持自己的增長節奏。
這幾年也積累了壹些關於視頻編輯和相關產品的經驗。今天來介紹壹款可以將AE（Adobe Effect）文件導出json格式的工具，名叫lottie。
第壹次接觸它是在3年前，做視頻社交的時候，需要做視頻編輯功能，後來因為產品方向的變革，沒有使用成功，但第壹次的接觸讓閣主認識到這個軟件的存在。
最近又在做視頻模板相關的需求，做壹個可編輯的視頻模板，用戶只需要在模板填充內容，就可以使用已有的酷炫視頻資源，於是又接觸到Lottie 。
當時遇到壹個什麽樣的問題呢，設計師可以用AE（Adobe Effect）設計出各種酷炫的視頻效果，但開發真的要將設計師所做的效果顯現出來並適配各個系統和各種大小的屏幕，會耗費很大的工程量，成本比較大，為了盡量縮小開發成本，於是引用了lottie。
ottie最大的好處，就是 可以將做好的AE文件，直接導出json文件，讓開發直接運用 ，基本上實現了0成本的開發量，真是太棒了，大大減少了設計師和開發之間的溝通成本。
1. 先安裝Adobe Effect，劃重點，最好是安裝英文版本的。
lottie是由Airbnb團隊研發出來的，因為是國外的公司，所以漢化版本，或多或少會出現各種兼容的問題，閣主在這個上面是吃了很多虧的。
但別擔心，各個設計軟件的界面長得都差不多，基本能猜到各個圖標是幹什麽，以及相應的操作提示是什麽意思，哪怕有壹兩個單次不認識，網上翻壹下也就都懂了，界面英文不會太難。
2.在公眾號後臺回復“Lottie”，即可得到相應的安裝文件文件。
安裝文件也是英文版本，解壓後有2個文件，1個是 ZXP Installer ，另壹個是 bodymovin.zxp ，先安裝ZXP Installer，安裝好了之後打開，會出現如下界面。bodymovin是設計師用的插件，lottie是開發側要用的文件json文件，壹般對外將兩者形成的系統稱為lottie。
然後將bodymovin.zxp拖到界面去就完成了安裝。
1.設置AE腳本權限。
路徑為在 AE-首選項-常規 中勾選 允許腳本寫入文件和訪問網絡，英文路徑就是Adobe Effects-Preferences-Scripting&Expressions-勾選Allow Scripts to Write Files and Access Network，如下圖
2.先用AE做好妳想要的視頻，這壹步按各自的想要做的內容來；
3.導出。導出路徑為Windows-Extensions-Bodymovin，如下圖
4.選擇相應要導出的文件，以及選擇導出的路徑，如下圖
5.做好Bodymovin的設置，設置項如下圖
6.點擊綠色按鈕 “Render” 就大功告成了。
如果出現如下圖的現象，插件卡在某個圖片上，導不出來，可以嘗試以下幾個方法：
1.在使用bodymovin的時候 將電腦的語言系統也換成英文 ，如果不習慣，不用的時候再換回來中文。系統語言有時候也會影響導出的成功率，閣主用的是正版AE2020會遇見語言問題，用2017英文版就不會，也跟AE軟件本身版本相關。
2.導出json的路徑如果含有空格，也可能導致不能導出， 直接導出到桌面 是最直接的。
3.太復雜的動畫可能導出會有問題，簡單的遮罩是支持的， 建議不要用太復雜的邏輯做動效 。
最後，總結壹下，為了跟上時代的潮流，拓展自己的技能，可以嘗試下視頻相關的設計需求。而Lottie是其中能幫助團隊節省開發效率，讓設計師專心設計動效掌握主動權的工具。
如想嘗試，可在公眾號後臺回復 “Lottie” ，即可得到相應的安裝文件文件。
往期精彩文章
《關於交互設計的思維抽象》
《在家辦公是要寫日報的》
《B端設計之導航》