在互聯網應用以及設備硬件性能不斷發展的如今，動效的需求越來越大，越來越多的app開始出現更多的動效效果，而傳統實現方式的缺點和局限性比較明顯。如png序列需要多次請求，在web端訪問下變得不實際，雪碧圖文件又太大，且在不同屏幕分辨率下可能會失真，所以想達到更好的效果就需要開發直接把動畫用代碼寫出來，而現在使用各平台的native代碼實現一套複雜的動畫是非常困難並且耗時的事，我們需要為不同的屏幕適配不同資源，還需要寫大量過幾天連自己都不認識的代碼。在市場需求的推動下，Lottie應運而生。
現在在很多互聯網招聘信息裡很多都寫著要求會做Lottie動畫，而找朋友要一份文件看看到底是什麼，結果人家甩過來一個JSON文件，打開一看全是代碼，一下腦子就大了。
那麼，Lottie到底是什麼呢？其實，Lottie只是一種庫的名字（這裡不做專業的解釋，只是為了讓設計師理解個大概）。這裡就要先解釋一下什麼叫庫，庫可以理解為一種規則，打個比方，如果直接給你0 0 0這麼三個數，那麼你肯定一臉懵，那麼如果在0 0 0前面加上RGB變成RGB:(0,0,0)那麼你就知道這是個黑色，如果前面加上XYZ變成XYZ:(0,0,0)那麼你就知道這是原點。那麼前面的RGB或者XYZ等這些，我們可以理解為是以何種規則去讀這三個0，而這個規則會有無數種規則，將這些所有規則打包整理起來成一體，這個一體的東西就叫庫。
曾經有一個叫Hernan Torrisi的人把他在After Effects中製作的動畫導出成了一個後綴為JSON的數據文件，裡面有一大堆代碼，然後又制定了一套如何解讀這套代碼的庫，這個庫就取名叫Lottie。那麼可能有人會問導出的文件是JSON格式的為什麼不直接叫JSON多方便，其實了解代碼的人會知道，JSON常規來說是一個很普通的存放數據的文件格式，我們可以簡單舉例為就是一個TXT文件，這個TXT裡面什麼文本都能放，我們不能說裡面放了一段英文，以後就把所有英文都叫TXT，這才是不合理的。
而之後人們就把這種調用Lottie庫的一系列相關文件與操作簡稱為Lottie。當你跟前端說這個用Lottie實現時，前端就知道你會給他一個JSON文件或者一個包含JSON和鏈接圖片的zip包，而他也知道需要調用Lottie庫來讀這個文件。
Lottie動畫是由Adobe After Effects 製作，所以要保證自己電腦裡有After Effects 軟件，這個的安裝很簡單，就不做過多贅述了。因為一般BodyMovin 都是使用較高版本，所以建議After Effects 軟件版本也高一些，以免出現版本不匹配造成的bug。
打開After Effects 後要先勾選上首選項中的“允許腳本寫入文件和訪問網絡”，才能正常打開插件。這里以2020版本為例，依次選擇菜單欄中：
Edit>Preferences>Scripting & Expressions>Allow Scripts to Write Files and Access Network
編輯>首選項>腳本和表達式>允許腳本寫入文件和訪問網絡
腳本是一系列的命令，它命令應用程序執行一系列操作。大多數Adobe 應用程序中都使用腳本來自動執行重複性任務、複雜計算，甚至使用一些沒有通過界面UI 直接顯露的功能。默認情況下，腳本都不被允許寫入文件或通過網絡收發通信，所以需要手動打開控制項。
導出Lottie 文件需要將After Effects 切換為英文版，如果使用中文版，LottieFiles 會找不到文件中的合成，而BodyMovin 在雖然可以正常導出，但是很多情況下會出現很多bug，比如漸變色不識別，透明度不識別等，後期排查會很費時，所以一般情況下還是要先將After Effects 切換為英文版之後再開始做素材導入、動畫製作等操作。
Adobe After Effects cc2020中英文切換需要先在以下地址找到application.xml 文件。
win：
默認安裝地址——C:Program FilesAdobeAdobe After Effects 2020Support FilesAMT
自定義安裝地址——自定義地址Adobe After Effects 2020Support FilesAMT
mac：
Finder-前往文件夾：/資源庫/Application Support/Adobe/After Effects/17.0/AMT/
找到文件後先複製到桌面，然後再打開，因為如果直接本地打開修改後是無法直接保存的。找到裡面的語言類型並修改成需要的語言，zh_CN 為中文，en_US 為英文，保存後替換原始文件。修改完成後再次打開After Effects 就會變成所設置的語言。
ZXP 格式的插件需要使用與之配套的ZXP Installer 軟件來為After Effects 安裝，網上有些科學版插件本身也是ZXP 格式的，只是別人經過科學處理之後可以直接放入After Effects 相應的文件夾下就可正常使用，用這個軟件依然可以很方便的進行管理。我們需要先安裝好這個擴展管理器才能繼續安裝Lottie 插件，包括要從Sketch 和Figma 導入素材的時候也需要這個來安裝插件。下載地址
Windows 系統下載好ZXP 格式的插件後雙擊打開就可以自動喚起ZXP Installer 並安裝到電腦對應版本的After Effects 中。 Mac系統先手動打開ZXP Installer 後將插件文件拖入界面內以安裝。
XXX.psd 格式的文件是可以直接導入After Effect 的。
1. 柵格化效果
為避免Photoshop 中使用的效果After Effect 無法完美識別，或Lottie 資源庫無法支持，建議導入前先將效果柵格化，過於復雜的效果不建議做動畫。但是作為一個專業設計師，保持文件可再編輯性也是很重要的一件事，所以可以適當考慮將圖層轉換為智能對象（智能對象相關說明請移步Photoshop教程）以便再次修改。
2. 圖層整理
Photoshop 製作的文件可能會有非常多的圖層，每個圖層導入After Effect 的時候也會生成一個圖層以進行動畫製作，如果不加以整理就會導致After Effect 中的圖層過多，大幅增加動畫的製作難度，所以應適當的減少或合併圖層，也可以轉換為智能對象，並建議不使用或少使用遮罩蒙版等效果，以免後期製作或輸出的時候出現效果不支持或動畫落地後cpu 佔用過大的問題。
3. 導入選項
XXX.ai 格式的文件導入After Effect 與psd 文件導入After Effect 基本相同。
1. 整理效果
盡量將效果簡化，這裡舉出幾個常用的屬性。
剪切蒙版：雖然簡單的剪切蒙版屬性可以被識別，但是如果內容較為複雜，矢量化後會出現其他屬性，影響Lottie導出的穩定性，建議先用路徑查找器把圖形合併成基本形狀，如果一定要保留或者後期要做動畫變化，可以先拆解開，並分成不同圖層，導入After Effect 後再進行從新建立遮罩屬性，但需要注意的是，再安卓系統下，因為安卓本身算法的問題，遮罩會非常消耗硬件性能，每一層元素遮罩後的消耗會成倍增加，所以建議避免使用遮罩效果，或將遮罩內的元素盡量減少，如拼成一張圖片等。
投影、模糊、漸變：雖然After Effect中也有相關效果，但是算法並不相同，所以導入之後會出現錯誤，這裡可以先將原始文件另存一份備份保留，刪除相關屬性後進行導入，然後參照原始文件的屬性參數使用After Effect 從新製作。
透明度：透明度屬性在矢量化之後也會消失，所以需要參照原始文件在After Effect中從新製作，而在After Effect中透明度屬性可以在三處調整，填充屬性、形狀組屬性和圖層屬性，具體加在哪一層屬性可以根據後期需要製作的動畫效果進行調整。
虛線：可以導入並進行矢量化，但是會被拆分成多段，不易進行效果製作，建議同投影等相同，先取消效果，置入After Effect後在描邊屬性內加入虛線效果以製作。
外觀：帶有外觀屬性的圖層轉換為矢量圖層後會生成很多干擾數據，如果是想要以矢量圖層做動畫的元素盡量將外觀屬性去掉，轉換為矢量後在After Effect再處理。
2. 拆分圖層（圖片素材文件來自網絡）
相信很多人用Illustrator 做設計的時候並沒有太過於注重圖層，很多時候都是在一層裡就直接把設計做完了，這樣的文件直接導入After Effect 時也會只有一層，轉換為矢量圖形的時候也會把所有內容放到一層。這些內容在置入After Effect 後想要拆分開會很難，所以在導入After Effect 之前將圖層拆分好就變得至關重要。
比如這張圖，很多人用Illustrator 做完設計之後圖層內都只有一個圖層，這時導入After Effect 到的時候就會只有一層。而且，在轉換為矢量形狀之後，所有的形狀也將會集合在一個大的形狀圖層中，這樣非常不利於後期做動態效果。
我們需要先將需要獨立出來的每一套元素整理好。然後在圖層面板中選中上一級的圖層，點擊右上角的選項，選擇“釋放到圖層（順序）”，這時我們就可以把每一個元素拉到第一級的目錄下了，同時原來的圖層就變成了空白圖層，可以刪除了。將圖層釋放之後再根據需要將圖層命名，再置入After Effect 中就會是我們想要的獨立元素的圖層了。 Illustrator 的導入選項可參考psd 相關導入選項。
3. 導入選項
Illustrator 的導入選項與Photoshop 導入選項基本相同，可參考psd 相關導入選項。
4. 素材矢量化
Illustrator 中的矢量圖形都可以轉換成After Effect 中的矢量形狀，而未被矢量化的圖層將會以圖片的形式進行導出。做動效之前優先將所有需要矢量化的圖層轉換成矢量路徑，而不需要矢量化的圖層保留，如不需要做動畫的元素或Lottie不支持的效果，還有硬件性能消耗巨大的效果等。轉化矢量路徑也可以檢驗效果是否整理完善，如有些效果有遺漏或處理有問題，可以返回Illustrator 中再次修改後，整個文件從新置入或單層重新加載素材來更新圖層。這一步如果在做完動效之後再做或者做一部分效果轉換一部分，重新加載素材的時候有可能會出現偏差。
sketch 和figma 文件導入After Effect 之前也要先整理效果與圖層。將不支持的效果拼合成圖片，比如角度漸變等。將復雜形狀拼合成路徑，包括四個圓角度數不相同的矩形，這些在After Effect 中也是無法直接實現的。
sketch 文件導入需要使用的插件早期叫做Sketch2AE ，支持到sketch 51 之前的版本，因為這個版本已經過於老舊，這裡就不著重提及了。 sketch 51版本之後的插件改為AEUX ，下載地址。無論是sketch 還是figma，當導入文件時出現報錯或者再某個位置卡住等問題，優先檢查插件是否有更新。
下載完成之後壓縮包裡面主要有三個套文件，一套sketch 插件文件，一套figma 插件文件，一套After Effect 插件文件。
1. Adobe After Effects
無論是sketch 還是figma 文件想導入After Effects 中，都需要在After Effects 中安裝AEUX 插件作為接口來使用。直接使用ZXP Installer 進行安裝。
打開After Effects 後在工具欄找到：窗口>擴展>AEUX。就可以打開AEUX 面板。
之所以把After Effects 放在前面，是因為需要現在After Effects 中設置好需要導入的形式以及規則，之後在sketch 和figma 中點擊Send selection to Ae 就可以將所選元素按照設置好的規則導入。
小提示：倍數關係將會體現在形狀組的縮放上，而並非直接體現在形狀大小上，這樣在做有些效果的時候計算變化量就會變得混亂。
比如我們在一個400 * 400 dp 的畫板中創建一個200 * 200 dp 的矩形，以3倍圖導入後，矩形的大小依然是200 * 200 px，但是矩形組的縮放變成了300%（實際顯示像素為600 * 600 px ），合成大小為1200 * 1200 px，這樣就會讓整個效果製作過程變得異常複雜：矩形的大小變化量要在1倍圖的係數下計算，哪怕同樣是位移變化，形狀的位移變化量要在1倍圖下計算，組的位移和合成的位移變化量要在3倍圖下計算。如果導入之前先將設計稿從邏輯像素轉換為物理像素，也就是直接放大三倍，以1倍係數導入後，合成大小為1200 * 1200 px，矩形的大小為600 * 600 px，之後所有變化量都為物理像素變化量，計算係數就相對統一了。
Detect parametric shapes
如果選中的話會保留基本形狀屬性，如設計軟件中的矩形導入後會以矩形形狀保留，可以設定寬度、高度和圓角等屬性。不選中的話會以路徑形式導入，效果相當於將形狀轉換為貝塞爾曲線路徑。但這裡要注意的是並不是所有屬性都是可以置入After Effects 中的，比如不同的圓角角度等，這些效果After Effects 是不支持的，所以想還原視覺稿就需要以路徑形式導入。
Precomp groups
如果不勾選此項，會將組創建為不可見的參考線圖層，作為組內元素的父級一起導入。勾選此項，導入時會自動為組創建預合成。
Precomp
將導入組時生成的參考線圖層和組內元組合成預合成。先選中導入組時生成的參考線圖層，然後點擊Precomp 就會將組自動整合成預合成。
Un-precomp
將導入組時生成的預合成拆分成參考線圖層和獨立元素。
Toggle guide layer visibility
隱藏或顯示參考線圖層。導入組時生成的參考線圖層大小與組的大小相同，並覆蓋在組內元素上層，在顯示參考線圖層的時候點擊組內元素會優先選擇參考線圖層，可以方便的移動或控制整體組的元素。而隱藏參考線圖層的時候點擊就會直接選擇到組內元素，方面製作細節動畫。
Delete guide layers
如果不需要組生成的參考線圖層，點擊後會全部刪除。
2. sketch
aeux.sketchplugin 就是sketch 的插件安裝包，和其他sketch 插件一樣雙擊就可自動安裝。在工具欄中找到：插件>AEUX>Open panel 就可以打開AEUX 的控制面板。 sketch 上的AEUX 的面板主要有三個選項，其中位於下方兩個選項主要在做導入準備時使用。
Send selection to Ae - 將所選內容導入After Effect
先選中元素，點擊之後就會自動導入After Effect。可以是畫板中的其中某一個或幾個元素，也可以是整個畫板，也可以是圖片。如果需要導入的是圖片，則會彈出彈窗，需要選擇一個圖片的保存地點用來置入After Effect，切為了避免圖片命名導致圖片被導出時覆蓋，圖片將自動編成亂碼以作區分。個人不太喜歡這種亂碼的命名格式，所以習慣手動導出圖片後再手動置入After Effect 中，或者手動導出一套命名後的圖片，然後去After Effect 中手動原位替換素材。這樣的好處是在製作的過程中覺得某張圖片需要微調，在不需要調整圖片大小的情況下，可以直接覆蓋原始素材而不影響After Effect 中已製作好的動畫，如果是亂碼的話覆蓋素材的時候會不方便。
Flatten shapes - 合併形狀
過於復雜的布爾運算會加大After Effect 的計算量，也會使動畫製作變得更加複雜，所以在導入After Effect 之前應先將路徑合併掉。此選項可以將所有選擇的形狀一鍵合併，不需要每一個單獨合併操作一遍。
Detach symbols - 分離組件
複雜的組件在導入After Effect 中因為邏輯並不相同可能會出現錯誤，所以在導入之前應先將組件分離。此選項可以將所有選擇的組件一鍵解除，不需要每一個單獨解除操作一遍。
3.Figma
該插件尚未在figma.com/plugins 上發布，因此安裝過程要復雜一些。
右鍵單擊畫布，然後找到：Plugins>Development>New Plugin…
在彈出的頁面中點擊虛線區域中的click to choose a manifest.json file，然後選擇安裝包中AEUX Figma 文件夾下的manifest.json 文件就可以安裝上了。
安裝好之後右鍵單擊畫布，然後找到：Plugins>Development>AEUX 就可以調用
製作的時候要注意選擇Lottie文件支持的效果製作，如果超出支持範圍，則需要試用其他方式處理，比如將效果整合成圖片或者序列幀等。
這裡我們以一個很簡單的勳章動畫為例。文件結構及效果如下圖：
BodyMovin 是最原始也是我們最常用導出動畫的插件，項目中使用的JSON 文件大多都是用這個插件導出的。下載後用ZXP Installer 進行安裝。 下載地址
打開After Effects 後，從窗口>擴展>bodymovin 打開插件面板。
設置相關內容較多，這裡就不放圖片了，下面逐項說明一下設置選項，也方便大家使用網頁搜索快速查找自己所需要查看的內容。
· Glyphs - 字形
導出時將字體轉換為形狀，可以避免出現字體錯誤等問題。如果不勾選的話文字將會以文本形式再代碼中保留，開發可以根據需要修改文本內容，如本樣例中LEVEL 和50 兩組文字，如果以保留文本形式導出，開發可以將50 換成任意其他級別。但如果不需要開發從代碼控製文字顯示內容建議勾選此項。
· Bundle Fonts - 包含字體（Glyphs未勾選時可選）
導出時附帶有字體文件，只有在前端使用Skottie播放器時可以用。
· Inline Fonts - 內嵌字體（Bundle Fonts勾選時可選）
在json文件中內嵌字體，不需要做外部鏈接，使用起來會比鏈接形式方便，也可以減少網絡文件請求次數，缺點就是會增加json文件的大小，增加載入時間。
· Hidden - 隱藏圖層
選擇後會導出隱藏圖層。雖然文件內會包含隱藏圖層，但默認狀態下依然是不可見的狀態，可以由代碼控制是否顯示。
· Guides - 參考線圖層
選擇後會導出參考線圖層。
· Extra Comps - 額外合成
選擇是否表達式指向額外合成。如果所用表達式指向的合成並不在渲染樹內，則需要勾選以免無法找到表達式數據，反之如果表達式所指向的合成本身就在渲染樹內，則無需勾選。
Assets - 資源
· Original Asset Names - 原始資源名稱
導出帶有原始項目名稱的資源。如果不勾選的話會變成默認名稱（如img_X），建議有公共資源的時候，比如幾個文件共用一個圖片素材包的時候，或者後期要對圖片進行替換等情況下勾選上，以免之後替換圖片造成名稱混亂。需要注意的是，資源名稱是指的在素材箱中的原資源名稱，而並非合成中圖層的名稱，且不可是中文名，如果有重複的資源名稱，系統會自動給資源名增加數字後綴，所以要避免圖片名稱重複否則如果不注意的話後期替換素材的時候會有極高可能性替換錯誤。如果是通過AEUX 導入的圖片的話，圖片素材都會被默認命名為一串亂碼，如果不加以整理的話也會將這串亂碼導出，所以要提前整理好名稱。
· Copy Original Assets - 複製原始資源
使用After Effect 調用的源文件。不選擇此項下方會出現壓縮圖片的選項。如不選擇此項After Effect 將導出未經壓縮的圖片作為之後Lottie 素材使用，這樣會增加圖片大小，極端情況下一張照片會放大8倍。如果選擇此項則會直接將調用的原文件複製到圖片包內，圖片保持原始大小不變。如果使用外鏈圖片的方式則可以不勾選此項，並在最終交付開發的時候將圖片壓縮以減小文件大小。如果將圖片打包到JSON 文件內部則需要先將圖片壓縮好，並勾選此項以免導出時增加文件大小。
注： Photoshop文件和Illustrator文件如果以AI圖層的形式導入After Effect，導出時候將不會識別AI圖層，導致整個原始文件被複製。
· Enable compression - 啟用壓縮
設置圖像層的壓縮比(0-100)。未勾選Copy Original Assets 時候出現此項。選擇後會自動將圖片壓縮，但因為壓縮的不可控性個人並不建議使用此選項來進行壓縮，導出後手動壓縮導出的圖片，或導出前手動壓縮原始鏈接圖片並勾選上一項Copy Original Assets，這樣整體文件大小可預知。
· Include in json - 包含在json 中
將圖像素材柵格化並包含在JSON 中。這樣導出會只有一個文件，減少開發的工作量，且在一定程度上可以減少bug的出現率，但是相對的文件大小會增加，且無法對圖片進行二次修改替換等操作。因為是內部的圖片信息，所以無法做到多個JSON 文件公用一套圖片素材包。
· Skip images export - 跳過圖像導出
自上次導出以來沒有更改，則可以選擇此項，不會從新導出圖片，減少文件導出時間。
· Include video and audio assets - 包含視頻和音頻資產
這還沒有得到播放器的支持。僅供實驗使用。
Export Modes - 導出模式
· Standard - 標準
導出動畫JSON 文件。
· Split - 拆分
拆分不會將單個圖層拆分為多個文件。
簡單來說，此選項將會把主合成拆分成以X 秒為單位的小段JSON 文件，但無法拆分圖層，如一段圖層跨過了兩段區域，這兩段區域則會合併成一段。
· Demo - 演示文件
導出一個html 的網頁文件用來提供本地預覽。此選項在以鏈接形式導出時預覽比較好用。
JSON 導出後常用驗證方式：
1. BodyMovin 內預覽。上面界面介紹的時候已經講過如何使用。但是如果在使用外鏈圖片的JSON 文件，預覽時候會顯示圖片丟失。
2. 導出Demo 演示文件。可以直接用瀏覽器打開播放，缺點就是只能正常播放，不能做任何操作，如變換速度，拖動進度條，修改循環模式，更改背景顏色等
3.網站預覽：網址。如果只有JSON 文件直接將文件拖入網頁進行預覽，如果是外鏈圖片的模式則將所有文件打包成一個ZIP 文件整體上傳後就可以預覽，在網站預覽可以調整播放速度、更改循環模式、更改背景顏色、分享鏈接、再次編輯、轉換為gif 等操作。
· Report - 報告
導出動畫報告。
· Rive - Rive 動畫
導出Rive，一種方便在Flutter中集成的格式，或者可以直接導入Rive的格式，可以添加Rive提供的其他功能。 Rive的官方網站
· Standalone - 獨立文件
將播放器和動畫導出在一個JS 文件中，方便web 端調用。
· Banner
為Banner使用，導出一組文件。可以導出JSON 相關文件、JS 文件、HTML 文件等，具體需要以何種形式導出建議先與研發溝通確認。此種導出形式主要針對web端。
· Lottie Library Origin - 調用Lottie庫
選擇以何種形式加載Lottie 庫。
· Lottie Renderer - Lottie渲染方式
選擇以何種形式渲染Lottie 動畫。
· Set Click tag value - 設置點擊標籤值
點擊後返回的信息，可以是需要跳轉的網頁地址等。
· Use composition size - 使用合成大小
選擇後默認以合成大小輸出，如未選可以重新設置需要導出的大小。
· Zip Files - 壓縮文件
選擇後會將文件夾自動打包成一個ZIP 文件，可以直接甩給開發。
· Inline animation data in template - 在模板中內聯動畫數據
選擇後會將動畫數據文件集成在HTML 文件之中，本地打開可以直接預覽效果。
· Loop - 循環
選中後動畫會無限循環播放。
· Loop Count - 循環次數
未選中Loop 時出現，可以直接設定重複多少次後停止。 0為播放1次重複0次，共播1次；1為播放1次重複1次，共播2詞。以此類推。
· AVD - Android AVD
導出一個可以在Android 系統的Drawable 直接使用的xml文件。使用Android 原生動畫可以減少系統資源佔用，達到性能最大化，但Android xml 下能夠支持的動畫效果更加有限，所以除非熟悉xml 否則不建議使用。
Expression options - 表達式選項
這個選項下的內容都是表達式相關的導出設置。 Lottie對於表達式的支持並不是十分完善，所以在製作過程中也不太建議使用表達式。
· Convert expressions to keyframes - 將表達式轉換為關鍵幀
此選項將合成中的表達式轉換為關鍵幀輸出，會顯著增加文件大小。
· Extend conversion beyond work area - 轉換拓展工作範圍之外的關鍵幀
當你需要轉換工作區以外的關鍵幀時使用。比如時間重映射。
· Remove expression properties (Reduces filesize) - 刪除表達式屬性(減少文件大小)
刪除僅用於表達式的屬性。如果你的動畫沒有使用表達式或者你的表達式沒有使用特殊的屬性可以選中此選項。
Advanced export settings - 高級導出設置
· Export old json format (for backwards compatibility) - 導出舊的json格式(為了向後兼容)
如果使用的是老版的庫文件，則需要勾選上。在項目中建議先跟開發確定庫的版本，如果是已有的庫，優先跟開發商量是否能更新，如果無法更新，則勾選上此項以導入後報錯無法播放。如果之前沒有庫一定要讓開發使用最新版本的庫且導出時不勾選此項。如果未來庫版本過低可能會達到無法兼容的地步，可能會到需要降bodymovin 插件版本的地步，bodymovin 版本過低還可能會需要降After Effects 版本。
· Trim unused keyframes and layers - 修剪未使用的關鍵幀和層
工作區外的圖層和關鍵幀將不會被導出，可以減少文件大小，但是後期如果需要修改的代碼的時候也將會沒有這些信息。
· Skip default properties (Reduces filesize) - 跳過默認屬性(減少文件大小)
如果沒有使用最新的ios、Android或網頁播放器則不要勾選此項，導出前先與開發確認。如果不確定的話不建議勾選此項，以免報錯無法播放。
· Include non supported properties - 包含不支持的屬性
那些Lottie不支持的屬性也將會被導出，當這些屬性有需要被導出以後期開發需要調用或為了給其他播放器使用的時候可以選擇此項以將這些屬性導出。
· Pretty print JSON - 導出格式話後的JSON
如果不勾選的話所有的代碼將會放在一行，人工不易解讀，勾選此項之後導出的代碼會自動換行以及縮進，方便人工讀取修改，但是文件會變得非常大，不適於最終輸出。其實在代碼編輯軟件都會有格式化的插件，所以此項其實並不是達到目標的唯一選擇。
Audio Settings - 音頻設置
· Enabled - 啟用
選擇後會處理音頻層並將它們導出為mp3 文件。
· Rasterize Waveforms - 柵格化波形
將mp3 以代碼形式置入JSON 文件中，而不是獨立的mp3 文件（不選中時只能在Skottie 播放器中使用）。
· Audio quality - 音頻質量
選擇音頻的導出質量。
LottieFiles 與BodyMovin 是由內部兩個不同團隊開發的，兩款插件的側重點各有不同，但基本功能都可以實現。 LottieFiles 主要供Lottie 愛好者在社區創建與上傳動畫用，工作項目中並不經常用到。利用LottieFiles 插件可以很方便的將自己所做的動畫上傳至雲端賬戶，方便他人瀏覽與下載。而在這個插件中，也可以很方便的看到每一幀渲染所消耗的硬件性能。下載地址
下載後用ZXP Installer 進行安裝。打開After Effects 後，從：窗口>擴展>LottieFiles 打開插件面板。
登錄後就可以看到LottieFiles 的功能面板了。
點擊設置後等待一段時間，會跳入設置面板，由於LottieFiles 主要針對的是社區相關的層面，所以更傾向於信息發布相關維度，相對於BodyMovin 來說可以設置的內容就少了很多。在裡面可以設置作者、描述與關鍵詞等相關信息，方面在社區內交流。
點擊導出後等待一段時間渲染完成後可以看到動畫效果。 LottieFiles 的預覽方式就很單一，導出完後可以看到動畫運行效果，上傳到個人社區之後可以在網頁中查看動畫效果以及鏈接等。
總的來說，LottieFiles 暫時還不是對接開發的主流插件，如果是Lottie 動畫的愛好者或者平時做些練習可以上傳到社區供大家觀看及使用，運氣好的話還會得到一些打賞，在國外有些設計師使用你的作品時會主動聯繫並支付一定的費用的。
常用Lottie的人一定經常被各種bug 所支配，那麼遇到bug 應該怎麼解決呢，這裡跟大家說一說大致的思路。
1. 軟件語言
為了減少bug，After Effects 軟件一定要用英文版。大家應該都清楚，在代碼中出現的中文都只是前端顯示內容，而在代碼語言中是不可以有中午的，所以要盡量避免不必要的中文，就要使用英文版軟甲。那麼有人會想最終做完效果之後再切換成英文版導出是不是可以，答案是否定的。從最開始導入的時候就要把軟件切換成英文版。在形狀圖層內的很多屬性都是可以自定義名稱的，比如矩形、矩形路徑、填充、描邊、漸變填充等，這些屬性在導入時或創建時就會帶有一個對應的默認名稱，而在切換英文的時候這些名稱不會被切換為英文，在導出時出現bug就要手動將所有相關屬性改名為英文，這一步數量會非常龐大。而在手動改名的過程中，有朋友曾經跟我反映過要注意英文拼寫，有時候Gradient 拼錯了都會導致導出錯誤。
2. 確認效果
有時候使用的一些效果最終導出的時候並沒有顯示出來，所以就以為是出現了bug，這種時候就要再次確認一下效果列表，看看所使用的效果是否確定是可以被支持的。如果效果不支持就需要考慮用其他方式實現，比如拼合成位圖等。
3. 保存、清理緩存、重啟、換系統
這一part 可能就比較玄學了。如果工程文件從新建到最終導出從來沒有存儲過，也就是說其實整個文件數據都在內存中，沒有一個本地文件，或者文件有過修改，也是有可能在導出時出現bug 的，所以在最後導出之前先保存一下文件，也可以避免一些錯誤。有時候也需要清理一下緩存，工具欄中找到：編輯- 清理，這裡面各種緩存也好內存也好，能清的全部清空吧。再有就是重啟了，如果平時工作中經常跟開發聊天，他們會告訴你，遇事不決先重啟。很多時候重啟都可以解決大部分問題。那麼首先就是重啟軟件了，比如我在做demo 的時候經常出現上次導出沒問題，這次導出就卡住不動了，重啟一下軟件就好了，如果不行，就重啟電腦。再有就是換系統，用Windows 導出如果總是有問題找不到原因，可以嘗試一下換mac 系統，反過來也一樣，在之前我做某個項目的時候透明漸變用Windows 總是導不出來，之後換成mac 系統很順利的就導出來了。
4. 升級庫/兼容性導出
有時候我們本地觀看沒有問題，但是給到開發就會出現報錯，這種時候先問開髮用的什麼版本的庫，如果開發使用的庫版本過低，而導出插件版本過高容易導致運行報錯，讓開發升級庫就能解決大部分問題。如果開發處於某些原因無法升級庫（雖然大多數都是在找藉口），那麼就要在導出的時候勾選上Export old json format (for backwards compatibility) - 導出舊的json格式(為了向後兼容) 以兼容早期版本的庫文件。
5. 針對性調整
有些時候我們導出的文件並沒有什麼問題，本地預覽也沒有什麼問題，但是用到應用內某些地方就出現了問題，這種時候就要針對出問題的部分做單獨處理，因為每個問題都不盡相同，所以無法給出一種通用的解決辦法。比如以前某個項目中使用的一套動畫文件，在網頁、iOS、Android手機端驗證都未發現問題，但是用在車機系統中就出現了錯位問題，看過實際效果後發現是套嵌的預合成內的元素錨點屬性丟失，最終不使用預合成直接在主合成中製作後不再出現問題。類似於這種就需要單獨看問題出在哪然後去處理了。
也許大部分人都會認為自己只是個設計，沒必要去考慮代碼的事，但我人為，設計師的存在是為了解決問題的，設計做的再好，無法落地就不是在解決問題，而是在生產問題。這裡說的code 並不是真的要自己去寫代碼，而是要知道用什麼邏輯去實現。
Lottie 在現階段並不是一個大眾化的格式，不像png序列一樣幾乎所有開發都會寫，所以當我們告訴開發要使用Lottie 實現的時候開發可能連Lottie 是什麼都不知道。這時候我們就要把這個開發文檔的網址給到開發：這個網址裡有調用Lottie所需的核心內容。其中還有很多做動畫控制所需的代碼，當需要開發去控制動畫播放，如播放次數、循環範圍、交互觸發等操作的時候，這裡也有相關說明。
