做好直接用！動(dòng)效神器 Lottie 基礎(chǔ)入門教學(xué)

疫情期間，在線生活迎來爆發(fā) ，視頻行業(yè)成了廣大網(wǎng)民放松娛樂和了解疫情、學(xué)習(xí)防護(hù)知識的重要平臺(tái)。

短視頻行業(yè)的日活用戶規(guī)模較平日增加 16.7%，日人均使用時(shí)長較平日增加 9.3%。長視頻成為很多網(wǎng)友在家消磨時(shí)間的方式。騰訊視頻獨(dú)播劇《三生三世枕上書》和芒果TV獨(dú)播劇《下一站是幸福》，更是讓平臺(tái)日活分別增加 22% 和 26%。

可以說，視頻行業(yè)的利好趨勢，基本上不受疫情影響。短期內(nèi)疫情會(huì)帶來較大增幅，但是疫情過去之后還會(huì)保持自己的增長節(jié)奏。

這幾年也積累了一些關(guān)于視頻編輯和相關(guān)產(chǎn)品的經(jīng)驗(yàn)。今天來介紹一款可以將 AE（Adobe Effect）文件導(dǎo)出 json 格式的工具，名叫 lottie。

什么是lottie

第一次接觸它是在 3 年前，做視頻社交的時(shí)候，需要做視頻編輯功能，后來因?yàn)楫a(chǎn)品方向的變革，沒有使用成功，但第一次的接觸讓閣主認(rèn)識到這個(gè)軟件的存在。

最近又在做視頻模板相關(guān)的需求，做一個(gè)可編輯的視頻模板，用戶只需要在模板填充內(nèi)容，就可以使用已有的酷炫視頻資源，于是又接觸到 Lottie。

當(dāng)時(shí)遇到一個(gè)什么樣的問題呢，設(shè)計(jì)師可以用 AE（Adobe Effect）設(shè)計(jì)出各種酷炫的視頻效果，但開發(fā)真的要將設(shè)計(jì)師所做的效果顯現(xiàn)出來并適配各個(gè)系統(tǒng)和各種大小的屏幕，會(huì)耗費(fèi)很大的工程量，成本比較大，為了盡量縮小開發(fā)成本，于是引用了 lottie。

lottie 最大的好處，就是可以將做好的 AE 文件，直接導(dǎo)出 json 文件，讓開發(fā)直接運(yùn)用，基本上實(shí)現(xiàn)了 0 成本的開發(fā)量，真是太棒了，大大減少了設(shè)計(jì)師和開發(fā)之間的溝通成本。

怎么安裝

1. 安裝Adobe Effect，最好是安裝英文版本的

lottie 是由 Airbnb 團(tuán)隊(duì)研發(fā)出來的，因?yàn)槭菄獾墓荆詽h化版本，或多或少會(huì)出現(xiàn)各種兼容的問題。

但別擔(dān)心，各個(gè)設(shè)計(jì)軟件的界面長得都差不多，基本能猜到各個(gè)圖標(biāo)是干什么的，以及相應(yīng)的操作提示是什么意思，哪怕有一兩個(gè)單詞不認(rèn)識，網(wǎng)上翻一下也就都懂了，界面英文不會(huì)太難。

2.下載文件并安裝

Lottie安裝文件鏈接：https://pan.baidu.com/s/1mXO3iyFkJPsUNWbonGdTiQ?提取碼：6V4g

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

安裝文件也是英文版本，解壓后有 2 個(gè)文件，1 個(gè)是 ZXP Installer，另一個(gè)是 bodymovin.zxp，先安裝 ZXP Installer，安裝好了之后打開，會(huì)出現(xiàn)如下界面。bodymovin 是設(shè)計(jì)師用的插件，lottie 是開發(fā)側(cè)要用的文件 json 文件，一般對外將兩者形成的系統(tǒng)稱為 lottie。

然后將 bodymovin.zxp 拖到界面去就完成了安裝。

怎么運(yùn)用

1. 設(shè)置AE腳本權(quán)限

路徑為在「 AE-首選項(xiàng)-常規(guī) 」中勾選「允許腳本寫入文件和訪問網(wǎng)絡(luò)」，英文路徑就是「Adobe Effects」-「Preferences」-「Scripting&Expressions」-勾選「Allow Scripts to Write Files and Access Network」，如下圖：

2. 用 AE 做好你想要的視頻，這一步按各自的想要做的內(nèi)容來

3. 導(dǎo)出

導(dǎo)出路徑為「Windows」-「Extensions」-「Bodymovin」，如下圖。

4. 選擇相應(yīng)要導(dǎo)出的文件，以及選擇導(dǎo)出的路徑

5. 做好 Bodymovin 的設(shè)置，設(shè)置項(xiàng)如下圖

6. 點(diǎn)擊綠色按鈕「Render」就大功告成了

相關(guān)注意事項(xiàng)

如果出現(xiàn)如下圖的現(xiàn)象，插件卡在某個(gè)圖片上，導(dǎo)不出來，可以嘗試以下幾個(gè)方法：

在使用 bodymovin 的時(shí)候?qū)㈦娔X的語言系統(tǒng)也換成英文，如果不習(xí)慣，不用的時(shí)候再換回來中文。系統(tǒng)語言有時(shí)候也會(huì)影響導(dǎo)出的成功率，閣主用的是正版 AE 2020 會(huì)遇見語言問題，用 2017 英文版就不會(huì)，也跟 AE 軟件本身版本相關(guān)。

導(dǎo)出 json 的路徑如果含有空格，也可能導(dǎo)致不能導(dǎo)出，直接導(dǎo)出到桌面是最直接的。

太復(fù)雜的動(dòng)畫可能導(dǎo)出會(huì)有問題，簡單的遮罩是支持的，建議不要用太復(fù)雜的邏輯做動(dòng)效。

最后，總結(jié)一下，為了跟上時(shí)代的潮流，拓展自己的技能，可以嘗試下視頻相關(guān)的設(shè)計(jì)需求。而 Lottie 是其中能幫助團(tuán)隊(duì)節(jié)省開發(fā)效率，讓設(shè)計(jì)師專心設(shè)計(jì)動(dòng)效掌握主動(dòng)權(quán)的工具。

Lottie安裝文件鏈接：https://pan.baidu.com/s/1mXO3iyFkJPsUNWbonGdTiQ 提取碼：6V4g

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

更多關(guān)于 Lottie 的教程：

歡迎關(guān)注作者的微信公眾號：「Sophia的玲瓏閣」