之前的文章已經介紹了 Lottie 是什么，以及如何導入設計文件，那么今天就為大家講解如何根據我們的需要導出 Lottie 文件。

往期回顧：

• 《比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）》
• 《比阿里犸良還強大！Lottie動效設計完全指南（導入篇）》

動效導出類型

一般情況下我們導出的動效可以分為三種類型。

1. 純矢量圖形動效

此類動效常用于圖標、加載、啟動頁等。

2. 包含位圖的基本動效

此類動效為了表現一定的視覺效果，會用到豐富的漸變和圖層樣式等效果，因為 AE 無法直接輸出，所以需要使用位圖的形式輸出。

3. 使用特殊效果的動效

前兩類雖然輸出的文件形式不一樣，但是都是使用基本的位移、大小、旋轉、透明度的基本動效屬性，可以通過代碼直接輸出。但是如果試用了 AE 中的特殊效果或者第三方插件的話，是無法直接輸出這些效果的。

動效導出方法

1. 純矢量動效導出

純矢量動效導出相對簡單，只需在導出時勾選字體圖形化和演示模式兩個選項，導出以后會生成一個 json 和 html 文件。分別供開發人員使用和預覽動效。

但是矢量動效導出目前有一個最大的問題就是漸變色導出會變為無彩色。官方說是因為編碼和語言的問題，所以中文版 AE 會出錯。目前有相關的修復方法，但是相對麻煩。工作中盡量規避使用矢量漸變色。

關于漸變導出出錯的修復方法，Windows 和 MacOS 需要進行不同操作。詳細請看以下步驟。

2. windows系統修復漸變問題

將AE程序語言設置為英文

方法一：在以下路徑找到 application.xml 文件，用記事本打開 application.xml，按鍵盤的 CTRL+F 鍵搜索 zh_CN 替換為 en_US，并保存文件，重啟 AE 即可

語言配置文件路徑：C:\Program Files\Adobe\Adobe After Effects CC 2018\Support Files\AMT

但如果 AE 是從網上下載的中文版本，可能會提示當前賬號只支持中文版 AE，修改后的 AE 無法正常打開。此時可以嘗試方法二。

方法二：卸載 AE，然后在 creative cloud 中點擊右上角菜單進入「首選項-creatice cloud-應用程序語言-設置為英文」，再通過 creative cloud 重新安裝 AE。

修改非unicode程序的語言為英文

通過「控制面板-時鐘和區域-更改日期、時間或數字格式-管理--更改系統區域設置-選擇英語（美國）」確定，然后重啟電腦。

步驟 2 的修改可能導致部分程序出錯，建議使用完畢后再將程序語言改為中文。

3. MacOS修復漸變問題

MacOS 相對簡單，只需將 AE 修改為英文版即可。

將 AE 程序語言設置為英文。在「在訪達-應用程序-選擇ae的程序包-點擊右鍵選擇現顯示包內容」，在 contens 文件夾下找到 resources，選擇 resources 的子文件。在 resources 文件夾中找到 zh_cn 和 zh_tw，將 zh_cn 和 zh_tw 這兩個文件夾拖出 resources 文件，就可實現 AE 的英文切換，重新拖回就實現了中文切換。

如果修改語言后，AE 無法打開，請參考上方，windosw 系統下通過 creative cloud 重裝英文版 AE 。需要注意的是 bodymovin 也需要使用最新版本，舊版本可能不支持。

含有位圖的動效導出

當動效中含有位圖時，導出的動效文件就會多出一個 imags 文件夾，用于存放圖片資源。導出之前可以在 bodymovin 的設置選項內可以進行相應的設置。

• 可以通過設置項來壓縮圖片資源，也可以導出圖片后再用壓縮工具壓縮。
• 將圖片轉為 base64 編碼并放進 JSON 文件里。這樣就不用導出 images 文件夾了。但是圖片轉為 base64 后體積會增加，并且目前只有最新版的 web 和安卓端支持帶 base64 的 JSON 文件的播放，iOS 以后才會加入。

這里額外需要注意的是，images 文件夾的名稱和內部圖片名稱不可隨意更改，不然 json 文件就無法調用資源，導致圖片資源加載出錯。

我們日常導出動效資源的時候默認生成的圖片資源命名都是 ima_0 這種格式的。但是在實際使用中會調用很多個 json 文件，如果每次生成的圖片名稱都一樣會導致加載錯亂，所以需要提前規避。一種方法是讓開發人員去規避，另一方面就是我們在設計之初就做好命名。

如果導入素材之前就已經命名好了就無需調整了，只需在 bodymovin 的「設置-圖片資源設置里勾選保留圖片名稱」。導出的圖片資源即可按照命名導出。

如果需要在 AE 內部修改，務必要在項目中修改素材名稱，在合成里修改的只是圖層名稱，這樣是不生效的。

特殊效果的動效導出

含有特殊效果的動效是無法直接導出的，所以只能用笨辦法，將動效渲染為序列幀。然后再導入 AE 按照幀動畫的方式輸出。

以一個粒子動效為例，首先我們將動效渲染為序列幀，然后隔一幀刪除一幀或者多幀，以此來減少圖片資源。在保證動效流暢的情況下，盡可能的減少圖片資源。以優化存儲和性能。

在合成設置里將幀率變為原來的 1/2，因為刪除了一半素材，仍然使用原來的幀率會導致動效速度加快。所以需要減少幀率以保持速度和原本一致。

選中所有圖層，將圖層的軌道向左移動到最小，然后「右鍵-關鍵幀輔助-序列圖層」，即可讓圖層一幀一幀播放。這里需要注意的是，首先選中最上方圖層，然后按住 shift 鍵，再次點擊最下方圖層。用這樣的方式全選圖層以后，再序列化圖層。動效的播放順序才是正常的，否則可能會倒放。

關于 Lottie 動效的介紹，以及設計輸出中可能會遇到的問題。到這里就告一段落了。相信看完這三篇文章，無論是對初次接觸的設計師推動團隊使用，還是新手設計師提高設計效率都會有一定幫助。

歡迎關注作者的微信公眾號：「懿凡設計」