整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
接：https://blog.csdn.net/m0_37631322/article/details/89678875
window.requestAnimationFrame API在動畫方面有非常大的應(yīng)用價值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>控件</ul>
<script>
setTimeout(()=> {
// 插入十萬條數(shù)據(jù)
const total=100000;
// 一次插入 20 條，如果覺得性能不好就減少
const once=20;
// 渲染數(shù)據(jù)總共需要幾次
const loopCount=total / once;
let countOfRender=0
let ul=document.querySelector("ul");
function add() {
// 優(yōu)化性能，插入不會造成回流
const fragment=document.createDocumentFragment();
for (let i=0; i < once; i++) {
const li=document.createElement("li");
li.innerText=Math.floor(Math.random() * total);
fragment.appendChild(li);
}
ul.appendChild(fragment);
countOfRender +=1;
loop();
}
function loop() {
if (countOfRender < loopCount) {
window.requestAnimationFrame(add);
}
}
loop();
}, 0);
</script>
</body>
</html>
window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個動畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動畫。該方法需要傳入一個回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會在瀏覽器下一次重繪之前執(zhí)行；
注意：若你想在瀏覽器下次重繪之前繼續(xù)更新下一幀動畫，那么回調(diào)函數(shù)自身必須再次調(diào)用window.requestAnimationFrame()
當(dāng)你準(zhǔn)備更新動畫時你應(yīng)該調(diào)用此方法。這將使瀏覽器在下一次重繪之前調(diào)用你傳入給該方法的動畫函數(shù)(即你的回調(diào)函數(shù))。回調(diào)函數(shù)執(zhí)行次數(shù)通常是每秒60次，但在大多數(shù)遵循W3C建議的瀏覽器中，回調(diào)函數(shù)執(zhí)行次數(shù)通常與瀏覽器屏幕刷新次數(shù)相匹配。為了提高性能和電池壽命，因此在大多數(shù)瀏覽器里，當(dāng)requestAnimationFrame() 運行在后臺標(biāo)簽頁或者隱藏的<iframe> 里時，requestAnimationFrame() 會被暫停調(diào)用以提升性能和電池壽命。
回調(diào)函數(shù)會被傳入DOMHighResTimeStamp參數(shù)，DOMHighResTimeStamp指示由RequestAnimationFrame（）排隊的回調(diào)開始觸發(fā)的時間。指示當(dāng)前被 requestAnimationFrame() 排序的回調(diào)函數(shù)被觸發(fā)的時間。在同一個幀中的多個回調(diào)函數(shù)，它們每一個都會接受到一個相同的時間戳，即使在計算上一個回調(diào)函數(shù)的工作負(fù)載期間已經(jīng)消耗了一些時間。該時間戳是一個十進(jìn)制數(shù)，單位毫秒，最小精度為1ms(1000μs)。
互聯(lián)網(wǎng)應(yīng)用以及設(shè)備硬件性能不斷發(fā)展的如今，動效的需求越來越大，越來越多的app開始出現(xiàn)更多的動效效果，而傳統(tǒng)實現(xiàn)方式的缺點和局限性比較明顯。如png序列需要多次請求，在web端訪問下變得不實際，雪碧圖文件又太大，且在不同屏幕分辨率下可能會失真，所以想達(dá)到更好的效果就需要開發(fā)直接把動畫用代碼寫出來，而現(xiàn)在使用各平臺的 native 代碼實現(xiàn)一套復(fù)雜的動畫是非常困難并且耗時的事，我們需要為不同的屏幕適配不同資源，還需要寫大量過幾天連自己都不認(rèn)識的代碼。在市場需求的推動下，Lottie 應(yīng)運而生。
現(xiàn)在在很多互聯(lián)網(wǎng)招聘信息里很多都寫著要求會做 Lottie 動畫，而找朋友要一份文件看看到底是什么，結(jié)果人家甩過來一個 JSON 文件，打開一看全是代碼，一下腦子就大了。
那么，Lottie 到底是什么呢？其實，Lottie 只是一種庫的名字（這里不做專業(yè)的解釋，只是為了讓設(shè)計師理解個大概）。這里就要先解釋一下什么叫庫，庫可以理解為一種規(guī)則，打個比方，如果直接給你 0 0 0 這么三個數(shù)，那么你肯定一臉懵，那么如果在 0 0 0 前面加上 RGB 變成 RGB:(0,0,0)那么你就知道這是個黑色，如果前面加上 XYZ 變成 XYZ:(0,0,0) 那么你就知道這是原點。那么前面的 RGB 或者 XYZ 等這些，我們可以理解為是以何種規(guī)則去讀這三個0，而這個規(guī)則會有無數(shù)種規(guī)則，將這些所有規(guī)則打包整理起來成一體，這個一體的東西就叫庫。
曾經(jīng)有一個叫 Hernan Torrisi 的人把他在 After Effects 中制作的動畫導(dǎo)出成了一個后綴為 JSON 的數(shù)據(jù)文件，里面有一大堆代碼，然后又制定了一套如何解讀這套代碼的庫，這個庫就取名叫 Lottie。那么可能有人會問導(dǎo)出的文件是 JSON 格式的為什么不直接叫 JSON 多方便，其實了解代碼的人會知道，JSON 常規(guī)來說是一個很普通的存放數(shù)據(jù)的文件格式，我們可以簡單舉例為就是一個 TXT 文件，這個 TXT 里面什么文本都能放，我們不能說里面放了一段英文，以后就把所有英文都叫 TXT，這才是不合理的。
而之后人們就把這種調(diào)用 Lottie 庫的一系列相關(guān)文件與操作簡稱為 Lottie。當(dāng)你跟前端說這個用 Lottie 實現(xiàn)時，前端就知道你會給他一個 JSON 文件或者一個包含 JSON 和鏈接圖片的 zip 包，而他也知道需要調(diào)用 Lottie 庫來讀這個文件。
Lottie動畫是由 Adobe After Effects 制作，所以要保證自己電腦里有 After Effects 軟件，這個的安裝很簡單，就不做過多贅述了。因為一般 BodyMovin 都是使用較高版本，所以建議 After Effects 軟件版本也高一些，以免出現(xiàn)版本不匹配造成的bug。
打開 After Effects 后要先勾選上首選項中的“允許腳本寫入文件和訪問網(wǎng)絡(luò)”，才能正常打開插件。這里以2020版本為例，依次選擇菜單欄中：
Edit>Preferences>Scripting & Expressions>Allow Scripts to Write Files and Access Network
編輯>首選項>腳本和表達(dá)式>允許腳本寫入文件和訪問網(wǎng)絡(luò)
腳本是一系列的命令，它命令應(yīng)用程序執(zhí)行一系列操作。大多數(shù) Adobe 應(yīng)用程序中都使用腳本來自動執(zhí)行重復(fù)性任務(wù)、復(fù)雜計算，甚至使用一些沒有通過界面 UI 直接顯露的功能。默認(rèn)情況下，腳本都不被允許寫入文件或通過網(wǎng)絡(luò)收發(fā)通信，所以需要手動打開控制項。
導(dǎo)出 Lottie 文件需要將 After Effects 切換為英文版，如果使用中文版，LottieFiles 會找不到文件中的合成，而 BodyMovin 在雖然可以正常導(dǎo)出，但是很多情況下會出現(xiàn)很多bug，比如漸變色不識別，透明度不識別等，后期排查會很費時，所以一般情況下還是要先將 After Effects 切換為英文版之后再開始做素材導(dǎo)入、動畫制作等操作。
Adobe After Effects cc2020中英文切換需要先在以下地址找到 application.xml 文件。
win：
默認(rèn)安裝地址——C:\Program Files\Adobe\Adobe After Effects 2020\Support Files\AMT
自定義安裝地址——自定義地址\Adobe After Effects 2020\Support Files\AMT
mac：
Finder-前往文件夾：/資源庫/Application Support/Adobe/After Effects/17.0/AMT/
找到文件后先復(fù)制到桌面，然后再打開，因為如果直接本地打開修改后是無法直接保存的。找到里面的語言類型并修改成需要的語言，zh_CN 為中文，en_US 為英文，保存后替換原始文件。修改完成后再次打開 After Effects 就會變成所設(shè)置的語言。
ZXP 格式的插件需要使用與之配套的 ZXP Installer 軟件來為 After Effects 安裝，網(wǎng)上有些科學(xué)版插件本身也是ZXP 格式的，只是別人經(jīng)過科學(xué)處理之后可以直接放入 After Effects 相應(yīng)的文件夾下就可正常使用，用這個軟件依然可以很方便的進(jìn)行管理。我們需要先安裝好這個擴(kuò)展管理器才能繼續(xù)安裝 Lottie 插件，包括要從 Sketch 和 Figma 導(dǎo)入素材的時候也需要這個來安裝插件。下載地址
Windows 系統(tǒng)下載好 ZXP 格式的插件后雙擊打開就可以自動喚起 ZXP Installer 并安裝到電腦對應(yīng)版本的 After Effects 中。Mac系統(tǒng)先手動打開 ZXP Installer 后將插件文件拖入界面內(nèi)以安裝。
XXX.psd 格式的文件是可以直接導(dǎo)入 After Effect 的。
1. 柵格化效果
為避免 Photoshop 中使用的效果 After Effect 無法完美識別，或 Lottie 資源庫無法支持，建議導(dǎo)入前先將效果柵格化，過于復(fù)雜的效果不建議做動畫。但是作為一個專業(yè)設(shè)計師，保持文件可再編輯性也是很重要的一件事，所以可以適當(dāng)考慮將圖層轉(zhuǎn)換為智能對象（智能對象相關(guān)說明請移步Photoshop教程）以便再次修改。
2. 圖層整理
Photoshop 制作的文件可能會有非常多的圖層，每個圖層導(dǎo)入 After Effect 的時候也會生成一個圖層以進(jìn)行動畫制作，如果不加以整理就會導(dǎo)致 After Effect 中的圖層過多，大幅增加動畫的制作難度，所以應(yīng)適當(dāng)?shù)臏p少或合并圖層，也可以轉(zhuǎn)換為智能對象，并建議不使用或少使用遮罩蒙版等效果，以免后期制作或輸出的時候出現(xiàn)效果不支持或動畫落地后 cpu 占用過大的問題。
3. 導(dǎo)入選項
XXX.ai 格式的文件導(dǎo)入 After Effect 與 psd 文件導(dǎo)入 After Effect 基本相同。
1. 整理效果
盡量將效果簡化，這里舉出幾個常用的屬性。
剪切蒙版：雖然簡單的剪切蒙版屬性可以被識別，但是如果內(nèi)容較為復(fù)雜，矢量化后會出現(xiàn)其他屬性，影響 Lottie 導(dǎo)出的穩(wěn)定性，建議先用路徑查找器把圖形合并成基本形狀，如果一定要保留或者后期要做動畫變化，可以先拆解開，并分成不同圖層，導(dǎo)入 After Effect 后再進(jìn)行從新建立遮罩屬性，但需要注意的是，再安卓系統(tǒng)下，因為安卓本身算法的問題，遮罩會非常消耗硬件性能，每一層元素遮罩后的消耗會成倍增加，所以建議避免使用遮罩效果，或?qū)⒄谡謨?nèi)的元素盡量減少，如拼成一張圖片等。
投影、模糊、漸變：雖然 After Effect 中也有相關(guān)效果，但是算法并不相同，所以導(dǎo)入之后會出現(xiàn)錯誤，這里可以先將原始文件另存一份備份保留，刪除相關(guān)屬性后進(jìn)行導(dǎo)入，然后參照原始文件的屬性參數(shù)使用 After Effect 從新制作。
透明度：透明度屬性在矢量化之后也會消失，所以需要參照原始文件在 After Effect 中從新制作，而在 After Effect 中透明度屬性可以在三處調(diào)整，填充屬性、形狀組屬性和圖層屬性，具體加在哪一層屬性可以根據(jù)后期需要制作的動畫效果進(jìn)行調(diào)整。
虛線：可以導(dǎo)入并進(jìn)行矢量化，但是會被拆分成多段，不易進(jìn)行效果制作，建議同投影等相同，先取消效果，置入 After Effect 后在描邊屬性內(nèi)加入虛線效果以制作。
外觀： 帶有外觀屬性的圖層轉(zhuǎn)換為矢量圖層后會生成很多干擾數(shù)據(jù)，如果是想要以矢量圖層做動畫的元素盡量將外觀屬性去掉，轉(zhuǎn)換為矢量后在 After Effect 再處理。
2. 拆分圖層（圖片素材文件來自網(wǎng)絡(luò)）
相信很多人用 Illustrator 做設(shè)計的時候并沒有太過于注重圖層，很多時候都是在一層里就直接把設(shè)計做完了，這樣的文件直接導(dǎo)入 After Effect 時也會只有一層，轉(zhuǎn)換為矢量圖形的時候也會把所有內(nèi)容放到一層。這些內(nèi)容在置入 After Effect 后想要拆分開會很難，所以在導(dǎo)入 After Effect 之前將圖層拆分好就變得至關(guān)重要。
比如這張圖，很多人用 Illustrator 做完設(shè)計之后圖層內(nèi)都只有一個圖層，這時導(dǎo)入 After Effect 到的時候就會只有一層。而且，在轉(zhuǎn)換為矢量形狀之后，所有的形狀也將會集合在一個大的形狀圖層中，這樣非常不利于后期做動態(tài)效果。
我們需要先將需要獨立出來的每一套元素整理好。然后在圖層面板中選中上一級的圖層，點擊右上角的選項，選擇“釋放到圖層（順序）”，這時我們就可以把每一個元素拉到第一級的目錄下了，同時原來的圖層就變成了空白圖層，可以刪除了。將圖層釋放之后再根據(jù)需要將圖層命名，再置入 After Effect 中就會是我們想要的獨立元素的圖層了。 Illustrator 的導(dǎo)入選項可參考 psd 相關(guān)導(dǎo)入選項。
3. 導(dǎo)入選項
Illustrator 的導(dǎo)入選項與 Photoshop 導(dǎo)入選項基本相同，可參考 psd 相關(guān)導(dǎo)入選項。
4. 素材矢量化
Illustrator 中的矢量圖形都可以轉(zhuǎn)換成 After Effect 中的矢量形狀，而未被矢量化的圖層將會以圖片的形式進(jìn)行導(dǎo)出。做動效之前優(yōu)先將所有需要矢量化的圖層轉(zhuǎn)換成矢量路徑，而不需要矢量化的圖層保留，如不需要做動畫的元素或Lottie不支持的效果，還有硬件性能消耗巨大的效果等。轉(zhuǎn)化矢量路徑也可以檢驗效果是否整理完善，如有些效果有遺漏或處理有問題，可以返回 Illustrator 中再次修改后，整個文件從新置入或單層重新加載素材來更新圖層。這一步如果在做完動效之后再做或者做一部分效果轉(zhuǎn)換一部分，重新加載素材的時候有可能會出現(xiàn)偏差。
sketch 和 figma 文件導(dǎo)入 After Effect 之前也要先整理效果與圖層。將不支持的效果拼合成圖片，比如角度漸變等。將復(fù)雜形狀拼合成路徑，包括四個圓角度數(shù)不相同的矩形，這些在 After Effect 中也是無法直接實現(xiàn)的。
sketch 文件導(dǎo)入需要使用的插件早期叫做 Sketch2AE ，支持到 sketch 51 之前的版本，因為這個版本已經(jīng)過于老舊，這里就不著重提及了。sketch 51 版本之后的插件改為 AEUX ，下載地址。無論是 sketch 還是 figma，當(dāng)導(dǎo)入文件時出現(xiàn)報錯或者再某個位置卡住等問題，優(yōu)先檢查插件是否有更新。
下載完成之后壓縮包里面主要有三個套文件，一套 sketch 插件文件，一套 figma 插件文件，一套 After Effect 插件文件。
1. Adobe After Effects
無論是 sketch 還是 figma 文件想導(dǎo)入 After Effects 中，都需要在 After Effects 中安裝 AEUX 插件作為接口來使用。直接使用 ZXP Installer 進(jìn)行安裝。
打開 After Effects 后在工具欄找到：窗口>擴(kuò)展>AEUX。就可以打開 AEUX 面板。
之所以把 After Effects 放在前面，是因為需要現(xiàn)在 After Effects 中設(shè)置好需要導(dǎo)入的形式以及規(guī)則，之后在 sketch 和 figma 中點擊 Send selection to Ae 就可以將所選元素按照設(shè)置好的規(guī)則導(dǎo)入。
小提示：倍數(shù)關(guān)系將會體現(xiàn)在形狀組的縮放上，而并非直接體現(xiàn)在形狀大小上，這樣在做有些效果的時候計算變化量就會變得混亂。
比如我們在一個 400 * 400 dp 的畫板中創(chuàng)建一個 200 * 200 dp 的矩形，以3倍圖導(dǎo)入后，矩形的大小依然是 200 * 200 px，但是矩形組的縮放變成了300%（實際顯示像素為 600 * 600 px ），合成大小為 1200 * 1200 px，這樣就會讓整個效果制作過程變得異常復(fù)雜：矩形的大小變化量要在1倍圖的系數(shù)下計算，哪怕同樣是位移變化，形狀的位移變化量要在1倍圖下計算，組的位移和合成的位移變化量要在3倍圖下計算。如果導(dǎo)入之前先將設(shè)計稿從邏輯像素轉(zhuǎn)換為物理像素，也就是直接放大三倍，以1倍系數(shù)導(dǎo)入后，合成大小為 1200 * 1200 px，矩形的大小為 600 * 600 px，之后所有變化量都為物理像素變化量，計算系數(shù)就相對統(tǒng)一了。
Detect parametric shapes
如果選中的話會保留基本形狀屬性，如設(shè)計軟件中的矩形導(dǎo)入后會以矩形形狀保留，可以設(shè)定寬度、高度和圓角等屬性。不選中的話會以路徑形式導(dǎo)入，效果相當(dāng)于將形狀轉(zhuǎn)換為貝塞爾曲線路徑。但這里要注意的是并不是所有屬性都是可以置入 After Effects 中的，比如不同的圓角角度等，這些效果 After Effects 是不支持的，所以想還原視覺稿就需要以路徑形式導(dǎo)入。
Precomp groups
如果不勾選此項，會將組創(chuàng)建為不可見的參考線圖層，作為組內(nèi)元素的父級一起導(dǎo)入。勾選此項，導(dǎo)入時會自動為組創(chuàng)建預(yù)合成。
Precomp
將導(dǎo)入組時生成的參考線圖層和組內(nèi)元組合成預(yù)合成。先選中導(dǎo)入組時生成的參考線圖層，然后點擊 Precomp 就會將組自動整合成預(yù)合成。
Un-precomp
將導(dǎo)入組時生成的預(yù)合成拆分成參考線圖層和獨立元素。
Toggle guide layer visibility
隱藏或顯示參考線圖層。導(dǎo)入組時生成的參考線圖層大小與組的大小相同，并覆蓋在組內(nèi)元素上層，在顯示參考線圖層的時候點擊組內(nèi)元素會優(yōu)先選擇參考線圖層，可以方便的移動或控制整體組的元素。而隱藏參考線圖層的時候點擊就會直接選擇到組內(nèi)元素，方面制作細(xì)節(jié)動畫。
Delete guide layers
如果不需要組生成的參考線圖層，點擊后會全部刪除。
2. sketch
aeux.sketchplugin 就是 sketch 的插件安裝包，和其他 sketch 插件一樣雙擊就可自動安裝。在工具欄中找到：插件>AEUX>Open panel 就可以打開 AEUX 的控制面板。sketch 上的 AEUX 的面板主要有三個選項，其中位于下方兩個選項主要在做導(dǎo)入準(zhǔn)備時使用。
Send selection to Ae - 將所選內(nèi)容導(dǎo)入 After Effect
先選中元素，點擊之后就會自動導(dǎo)入 After Effect。可以是畫板中的其中某一個或幾個元素，也可以是整個畫板，也可以是圖片。如果需要導(dǎo)入的是圖片，則會彈出彈窗，需要選擇一個圖片的保存地點用來置入 After Effect，切為了避免圖片命名導(dǎo)致圖片被導(dǎo)出時覆蓋，圖片將自動編成亂碼以作區(qū)分。個人不太喜歡這種亂碼的命名格式，所以習(xí)慣手動導(dǎo)出圖片后再手動置入 After Effect 中，或者手動導(dǎo)出一套命名后的圖片，然后去 After Effect 中手動原位替換素材。這樣的好處是在制作的過程中覺得某張圖片需要微調(diào)，在不需要調(diào)整圖片大小的情況下，可以直接覆蓋原始素材而不影響 After Effect 中已制作好的動畫，如果是亂碼的話覆蓋素材的時候會不方便。
Flatten shapes - 合并形狀
過于復(fù)雜的布爾運算會加大 After Effect 的計算量，也會使動畫制作變得更加復(fù)雜，所以在導(dǎo)入 After Effect 之前應(yīng)先將路徑合并掉。此選項可以將所有選擇的形狀一鍵合并，不需要每一個單獨合并操作一遍。
Detach symbols - 分離組件
復(fù)雜的組件在導(dǎo)入 After Effect 中因為邏輯并不相同可能會出現(xiàn)錯誤，所以在導(dǎo)入之前應(yīng)先將組件分離。此選項可以將所有選擇的組件一鍵解除，不需要每一個單獨解除操作一遍。
3.Figma
該插件尚未在 figma.com/plugins 上發(fā)布，因此安裝過程要復(fù)雜一些。
右鍵單擊畫布，然后找到：Plugins>Development>New Plugin…
在彈出的頁面中點擊虛線區(qū)域中的 click to choose a manifest.json file，然后選擇安裝包中 AEUX Figma 文件夾下的 manifest.json 文件就可以安裝上了。
安裝好之后右鍵單擊畫布，然后找到：Plugins>Development>AEUX 就可以調(diào)用
制作的時候要注意選擇Lottie文件支持的效果制作，如果超出支持范圍，則需要試用其他方式處理，比如將效果整合成圖片或者序列幀等。
這里我們以一個很簡單的勛章動畫為例。文件結(jié)構(gòu)及效果如下圖：
BodyMovin 是最原始也是我們最常用導(dǎo)出動畫的插件，項目中使用的 JSON 文件大多都是用這個插件導(dǎo)出的。下載后用 ZXP Installer 進(jìn)行安裝。
打開 After Effects 后，從 窗口>擴(kuò)展>bodymovin 打開插件面板。
設(shè)置相關(guān)內(nèi)容較多，這里就不放圖片了，下面逐項說明一下設(shè)置選項，也方便大家使用網(wǎng)頁搜索快速查找自己所需要查看的內(nèi)容。
· Glyphs - 字形
導(dǎo)出時將字體轉(zhuǎn)換為形狀，可以避免出現(xiàn)字體錯誤等問題。如果不勾選的話文字將會以文本形式再代碼中保留，開發(fā)可以根據(jù)需要修改文本內(nèi)容，如本樣例中 LEVEL 和 50 兩組文字，如果以保留文本形式導(dǎo)出，開發(fā)可以將 50 換成任意其他級別。但如果不需要開發(fā)從代碼控制文字顯示內(nèi)容建議勾選此項。
· Bundle Fonts - 包含字體（Glyphs未勾選時可選）
導(dǎo)出時附帶有字體文件，只有在前端使用Skottie播放器時可以用。
· Inline Fonts - 內(nèi)嵌字體（Bundle Fonts勾選時可選）
在json文件中內(nèi)嵌字體，不需要做外部鏈接，使用起來會比鏈接形式方便，也可以減少網(wǎng)絡(luò)文件請求次數(shù)，缺點就是會增加json文件的大小，增加載入時間。
· Hidden - 隱藏圖層
選擇后會導(dǎo)出隱藏圖層。雖然文件內(nèi)會包含隱藏圖層，但默認(rèn)狀態(tài)下依然是不可見的狀態(tài)，可以由代碼控制是否顯示。
· Guides - 參考線圖層
選擇后會導(dǎo)出參考線圖層。
· Extra Comps - 額外合成
選擇是否表達(dá)式指向額外合成。如果所用表達(dá)式指向的合成并不在渲染樹內(nèi)，則需要勾選以免無法找到表達(dá)式數(shù)據(jù)，反之如果表達(dá)式所指向的合成本身就在渲染樹內(nèi)，則無需勾選。
Assets - 資源
· Original Asset Names - 原始資源名稱
導(dǎo)出帶有原始項目名稱的資源。如果不勾選的話會變成默認(rèn)名稱（如img_X），建議有公共資源的時候，比如幾個文件共用一個圖片素材包的時候，或者后期要對圖片進(jìn)行替換等情況下勾選上，以免之后替換圖片造成名稱混亂。需要注意的是，資源名稱是指的在素材箱中的原資源名稱，而并非合成中圖層的名稱，且不可是中文名，如果有重復(fù)的資源名稱，系統(tǒng)會自動給資源名增加數(shù)字后綴，所以要避免圖片名稱重復(fù)否則如果不注意的話后期替換素材的時候會有極高可能性替換錯誤。如果是通過 AEUX 導(dǎo)入的圖片的話，圖片素材都會被默認(rèn)命名為一串亂碼，如果不加以整理的話也會將這串亂碼導(dǎo)出，所以要提前整理好名稱。
使用 After Effect 調(diào)用的源文件。不選擇此項下方會出現(xiàn)壓縮圖片的選項。如不選擇此項 After Effect 將導(dǎo)出未經(jīng)壓縮的圖片作為之后 Lottie 素材使用，這樣會增加圖片大小，極端情況下一張照片會放大8倍。如果選擇此項則會直接將調(diào)用的原文件復(fù)制到圖片包內(nèi)，圖片保持原始大小不變。如果使用外鏈圖片的方式則可以不勾選此項，并在最終交付開發(fā)的時候?qū)D片壓縮以減小文件大小。如果將圖片打包到 JSON 文件內(nèi)部則需要先將圖片壓縮好，并勾選此項以免導(dǎo)出時增加文件大小。
注：Photoshop 文件和 Illustrator 文件如果以AI圖層的形式導(dǎo)入 After Effect，導(dǎo)出時候?qū)⒉粫R別AI圖層，導(dǎo)致整個原始文件被復(fù)制。
設(shè)置圖像層的壓縮比(0-100)。未勾選 Copy Original Assets 時候出現(xiàn)此項。選擇后會自動將圖片壓縮，但因為壓縮的不可控性個人并不建議使用此選項來進(jìn)行壓縮，導(dǎo)出后手動壓縮導(dǎo)出的圖片，或?qū)С銮笆謩訅嚎s原始鏈接圖片并勾選上一項 Copy Original Assets，這樣整體文件大小可預(yù)知。
將圖像素材柵格化并包含在 JSON 中。這樣導(dǎo)出會只有一個文件，減少開發(fā)的工作量，且在一定程度上可以減少bug的出現(xiàn)率，但是相對的文件大小會增加，且無法對圖片進(jìn)行二次修改替換等操作。因為是內(nèi)部的圖片信息，所以無法做到多個 JSON 文件公用一套圖片素材包。
自上次導(dǎo)出以來沒有更改，則可以選擇此項，不會從新導(dǎo)出圖片，減少文件導(dǎo)出時間。
這還沒有得到播放器的支持。僅供實驗使用。
導(dǎo)出動畫 JSON 文件。
拆分不會將單個圖層拆分為多個文件。
簡單來說，此選項將會把主合成拆分成以 X 秒為單位的小段 JSON 文件，但無法拆分圖層，如一段圖層跨過了兩段區(qū)域，這兩段區(qū)域則會合并成一段。
· Demo - 演示文件
導(dǎo)出一個 html 的網(wǎng)頁文件用來提供本地預(yù)覽。此選項在以鏈接形式導(dǎo)出時預(yù)覽比較好用。
JSON 導(dǎo)出后常用驗證方式：
1. BodyMovin 內(nèi)預(yù)覽。上面界面介紹的時候已經(jīng)講過如何使用。但是如果在使用外鏈圖片的 JSON 文件，預(yù)覽時候會顯示圖片丟失。
2. 導(dǎo)出 Demo 演示文件。可以直接用瀏覽器打開播放，缺點就是只能正常播放，不能做任何操作，如變換速度，拖動進(jìn)度條，修改循環(huán)模式，更改背景顏色等
3. 網(wǎng)站預(yù)覽：網(wǎng)址。如果只有 JSON 文件直接將文件拖入網(wǎng)頁進(jìn)行預(yù)覽，如果是外鏈圖片的模式則將所有文件打包成一個 ZIP 文件整體上傳后就可以預(yù)覽，在網(wǎng)站預(yù)覽可以調(diào)整播放速度、更改循環(huán)模式、更改背景顏色、分享鏈接、再次編輯、轉(zhuǎn)換為 gif 等操作。
· Report - 報告
導(dǎo)出動畫報告。
· Rive - Rive 動畫
導(dǎo)出Rive，一種方便在Flutter中集成的格式，或者可以直接導(dǎo)入Rive的格式，可以添加Rive提供的其他功能。Rive的官方網(wǎng)站
· Standalone - 獨立文件
將播放器和動畫導(dǎo)出在一個 JS 文件中，方便 web 端調(diào)用。
· Banner
為Banner使用，導(dǎo)出一組文件。可以導(dǎo)出 JSON 相關(guān)文件、JS 文件、HTML 文件等，具體需要以何種形式導(dǎo)出建議先與研發(fā)溝通確認(rèn)。此種導(dǎo)出形式主要針對web端。
· Lottie Library Origin - 調(diào)用Lottie庫
選擇以何種形式加載 Lottie 庫。
· Lottie Renderer - Lottie渲染方式
選擇以何種形式渲染 Lottie 動畫。
· Set Click tag value - 設(shè)置點擊標(biāo)簽值
點擊后返回的信息，可以是需要跳轉(zhuǎn)的網(wǎng)頁地址等。
· Use composition size - 使用合成大小
選擇后默認(rèn)以合成大小輸出，如未選可以重新設(shè)置需要導(dǎo)出的大小。
· Zip Files - 壓縮文件
選擇后會將文件夾自動打包成一個 ZIP 文件，可以直接甩給開發(fā)。
· Inline animation data in template - 在模板中內(nèi)聯(lián)動畫數(shù)據(jù)
選擇后會將動畫數(shù)據(jù)文件集成在 HTML 文件之中，本地打開可以直接預(yù)覽效果。
· Loop - 循環(huán)
選中后動畫會無限循環(huán)播放。
· Loop Count - 循環(huán)次數(shù)
未選中 Loop 時出現(xiàn)，可以直接設(shè)定重復(fù)多少次后停止。0為播放1次重復(fù)0次，共播1次；1為播放1次重復(fù)1次，共播2詞。以此類推。
· AVD - Android AVD
導(dǎo)出一個可以在 Android 系統(tǒng)的 Drawable 直接使用的xml文件。使用 Android 原生動畫可以減少系統(tǒng)資源占用，達(dá)到性能最大化，但 Android xml 下能夠支持的動畫效果更加有限，所以除非熟悉 xml 否則不建議使用。
Expression options - 表達(dá)式選項
這個選項下的內(nèi)容都是表達(dá)式相關(guān)的導(dǎo)出設(shè)置。Lottie對于表達(dá)式的支持并不是十分完善，所以在制作過程中也不太建議使用表達(dá)式。
· Convert expressions to keyframes - 將表達(dá)式轉(zhuǎn)換為關(guān)鍵幀
此選項將合成中的表達(dá)式轉(zhuǎn)換為關(guān)鍵幀輸出，會顯著增加文件大小。
· Extend conversion beyond work area - 轉(zhuǎn)換拓展工作范圍之外的關(guān)鍵幀
當(dāng)你需要轉(zhuǎn)換工作區(qū)以外的關(guān)鍵幀時使用。比如時間重映射。
· Remove expression properties (Reduces filesize) - 刪除表達(dá)式屬性(減少文件大小)
刪除僅用于表達(dá)式的屬性。如果你的動畫沒有使用表達(dá)式或者你的表達(dá)式?jīng)]有使用特殊的屬性可以選中此選項 。
Advanced export settings - 高級導(dǎo)出設(shè)置
· Export old json format (for backwards compatibility) - 導(dǎo)出舊的json格式(為了向后兼容)
如果使用的是老版的庫文件，則需要勾選上。在項目中建議先跟開發(fā)確定庫的版本，如果是已有的庫，優(yōu)先跟開發(fā)商量是否能更新，如果無法更新，則勾選上此項以導(dǎo)入后報錯無法播放。如果之前沒有庫一定要讓開發(fā)使用最新版本的庫且導(dǎo)出時不勾選此項。如果未來庫版本過低可能會達(dá)到無法兼容的地步，可能會到需要降 bodymovin 插件版本的地步，bodymovin 版本過低還可能會需要降 After Effects 版本。
· Trim unused keyframes and layers - 修剪未使用的關(guān)鍵幀和層
工作區(qū)外的圖層和關(guān)鍵幀將不會被導(dǎo)出，可以減少文件大小，但是后期如果需要修改的代碼的時候也將會沒有這些信息。
· Skip default properties (Reduces filesize) - 跳過默認(rèn)屬性(減少文件大小)
如果沒有使用最新的ios、Android或網(wǎng)頁播放器則不要勾選此項，導(dǎo)出前先與開發(fā)確認(rèn)。如果不確定的話不建議勾選此項，以免報錯無法播放。
· Include non supported properties - 包含不支持的屬性
那些Lottie不支持的屬性也將會被導(dǎo)出，當(dāng)這些屬性有需要被導(dǎo)出以后期開發(fā)需要調(diào)用或為了給其他播放器使用的時候可以選擇此項以將這些屬性導(dǎo)出。
· Pretty print JSON - 導(dǎo)出格式話后的JSON
如果不勾選的話所有的代碼將會放在一行，人工不易解讀，勾選此項之后導(dǎo)出的代碼會自動換行以及縮進(jìn)，方便人工讀取修改，但是文件會變得非常大，不適于最終輸出。其實在代碼編輯軟件都會有格式化的插件，所以此項其實并不是達(dá)到目標(biāo)的唯一選擇。
Audio Settings - 音頻設(shè)置
· Enabled - 啟用
選擇后會處理音頻層并將它們導(dǎo)出為 mp3 文件。
· Rasterize Waveforms - 柵格化波形
將 mp3 以代碼形式置入 JSON 文件中，而不是獨立的 mp3 文件（不選中時只能在 Skottie 播放器中使用）。
· Audio quality - 音頻質(zhì)量
選擇音頻的導(dǎo)出質(zhì)量。
LottieFiles 與 BodyMovin 是由內(nèi)部兩個不同團(tuán)隊開發(fā)的，兩款插件的側(cè)重點各有不同，但基本功能都可以實現(xiàn)。LottieFiles 主要供 Lottie 愛好者在社區(qū)創(chuàng)建與上傳動畫用，工作項目中并不經(jīng)常用到。利用 LottieFiles 插件可以很方便的將自己所做的動畫上傳至云端賬戶，方便他人瀏覽與下載。而在這個插件中，也可以很方便的看到每一幀渲染所消耗的硬件性能。下載地址
下載后用 ZXP Installer 進(jìn)行安裝。打開 After Effects 后，從：窗口>擴(kuò)展>LottieFiles 打開插件面板。
登錄后就可以看到 LottieFiles 的功能面板了。
點擊設(shè)置后等待一段時間，會跳入設(shè)置面板，由于 LottieFiles 主要針對的是社區(qū)相關(guān)的層面，所以更傾向于信息發(fā)布相關(guān)維度，相對于 BodyMovin 來說可以設(shè)置的內(nèi)容就少了很多。在里面可以設(shè)置作者、描述與關(guān)鍵詞等相關(guān)信息，方面在社區(qū)內(nèi)交流。
點擊導(dǎo)出后等待一段時間渲染完成后可以看到動畫效果。LottieFiles 的預(yù)覽方式就很單一，導(dǎo)出完后可以看到動畫運行效果，上傳到個人社區(qū)之后可以在網(wǎng)頁中查看動畫效果以及鏈接等。
總的來說，LottieFiles 暫時還不是對接開發(fā)的主流插件，如果是 Lottie 動畫的愛好者或者平時做些練習(xí)可以上傳到社區(qū)供大家觀看及使用，運氣好的話還會得到一些打賞，在國外有些設(shè)計師使用你的作品時會主動聯(lián)系并支付一定的費用的。
常用Lottie的人一定經(jīng)常被各種 bug 所支配，那么遇到 bug 應(yīng)該怎么解決呢，這里跟大家說一說大致的思路。
1. 軟件語言
為了減少 bug，After Effects 軟件一定要用英文版。大家應(yīng)該都清楚，在代碼中出現(xiàn)的中文都只是前端顯示內(nèi)容，而在代碼語言中是不可以有中午的，所以要盡量避免不必要的中文，就要使用英文版軟甲。那么有人會想最終做完效果之后再切換成英文版導(dǎo)出是不是可以，答案是否定的。從最開始導(dǎo)入的時候就要把軟件切換成英文版。在形狀圖層內(nèi)的很多屬性都是可以自定義名稱的，比如矩形、矩形路徑、填充、描邊、漸變填充等，這些屬性在導(dǎo)入時或創(chuàng)建時就會帶有一個對應(yīng)的默認(rèn)名稱，而在切換英文的時候這些名稱不會被切換為英文，在導(dǎo)出時出現(xiàn)bug就要手動將所有相關(guān)屬性改名為英文，這一步數(shù)量會非常龐大。而在手動改名的過程中，有朋友曾經(jīng)跟我反映過要注意英文拼寫，有時候 Gradient 拼錯了都會導(dǎo)致導(dǎo)出錯誤。
2. 確認(rèn)效果
有時候使用的一些效果最終導(dǎo)出的時候并沒有顯示出來，所以就以為是出現(xiàn)了bug，這種時候就要再次確認(rèn)一下效果列表，看看所使用的效果是否確定是可以被支持的。如果效果不支持就需要考慮用其他方式實現(xiàn)，比如拼合成位圖等。
3. 保存、清理緩存、重啟、換系統(tǒng)
這一 part 可能就比較玄學(xué)了。如果工程文件從新建到最終導(dǎo)出從來沒有存儲過，也就是說其實整個文件數(shù)據(jù)都在內(nèi)存中，沒有一個本地文件，或者文件有過修改，也是有可能在導(dǎo)出時出現(xiàn) bug 的，所以在最后導(dǎo)出之前先保存一下文件，也可以避免一些錯誤。有時候也需要清理一下緩存，工具欄中找到：編輯 - 清理，這里面各種緩存也好內(nèi)存也好，能清的全部清空吧。再有就是重啟了，如果平時工作中經(jīng)常跟開發(fā)聊天，他們會告訴你，遇事不決先重啟。很多時候重啟都可以解決大部分問題。那么首先就是重啟軟件了，比如我在做 demo 的時候經(jīng)常出現(xiàn)上次導(dǎo)出沒問題，這次導(dǎo)出就卡住不動了，重啟一下軟件就好了，如果不行，就重啟電腦。再有就是換系統(tǒng)，用 Windows 導(dǎo)出如果總是有問題找不到原因，可以嘗試一下?lián)Q mac 系統(tǒng)，反過來也一樣，在之前我做某個項目的時候透明漸變用 Windows 總是導(dǎo)不出來，之后換成 mac 系統(tǒng)很順利的就導(dǎo)出來了。
4. 升級庫/兼容性導(dǎo)出
有時候我們本地觀看沒有問題，但是給到開發(fā)就會出現(xiàn)報錯，這種時候先問開發(fā)用的什么版本的庫，如果開發(fā)使用的庫版本過低，而導(dǎo)出插件版本過高容易導(dǎo)致運行報錯，讓開發(fā)升級庫就能解決大部分問題。如果開發(fā)處于某些原因無法升級庫（雖然大多數(shù)都是在找借口），那么就要在導(dǎo)出的時候勾選上 Export old json format (for backwards compatibility) - 導(dǎo)出舊的json格式(為了向后兼容) 以兼容早期版本的庫文件。
5. 針對性調(diào)整
有些時候我們導(dǎo)出的文件并沒有什么問題，本地預(yù)覽也沒有什么問題，但是用到應(yīng)用內(nèi)某些地方就出現(xiàn)了問題，這種時候就要針對出問題的部分做單獨處理，因為每個問題都不盡相同，所以無法給出一種通用的解決辦法。比如以前某個項目中使用的一套動畫文件，在網(wǎng)頁、iOS、Android手機(jī)端驗證都未發(fā)現(xiàn)問題，但是用在車機(jī)系統(tǒng)中就出現(xiàn)了錯位問題，看過實際效果后發(fā)現(xiàn)是套嵌的預(yù)合成內(nèi)的元素錨點屬性丟失，最終不使用預(yù)合成直接在主合成中制作后不再出現(xiàn)問題。類似于這種就需要單獨看問題出在哪然后去處理了。
也許大部分人都會認(rèn)為自己只是個設(shè)計，沒必要去考慮代碼的事，但我人為，設(shè)計師的存在是為了解決問題的，設(shè)計做的再好，無法落地就不是在解決問題，而是在生產(chǎn)問題。這里說的 code 并不是真的要自己去寫代碼，而是要知道用什么邏輯去實現(xiàn)。
Lottie 在現(xiàn)階段并不是一個大眾化的格式，不像png序列一樣幾乎所有開發(fā)都會寫，所以當(dāng)我們告訴開發(fā)要使用 Lottie 實現(xiàn)的時候開發(fā)可能連 Lottie 是什么都不知道。這時候我們就要把這個開發(fā)文檔的網(wǎng)址給到開發(fā)：這個網(wǎng)址 里有調(diào)用 Lottie 所需的核心內(nèi)容。其中還有很多做動畫控制所需的代碼，當(dāng)需要開發(fā)去控制動畫播放，如播放次數(shù)、循環(huán)范圍、交互觸發(fā)等操作的時候，這里也有相關(guān)說明。
總的來說，Lottie 畢竟還是一個新的動畫格式，雖然目前支持的效果有限，使用起來磕磕絆絆（bug多），但依然不能阻擋它流行起來的趨勢。現(xiàn)在越來越多的互聯(lián)網(wǎng)公司開始使用 Lottie 進(jìn)行落地，畢竟他的優(yōu)勢還是顯而易見的，跨平臺、開發(fā)成本低、效果還原度高等。相信在不久的未來，Lottie 所能支持的效果會越來越多，bug 會越來越少。
畫庫-animation.css
簡介
animate.css 是一個來自國外的 CSS3 動畫庫, 它預(yù)設(shè)了抖動(shake)、閃爍(flash)、彈跳(bounce)、翻轉(zhuǎn)(flip)、旋轉(zhuǎn)(rotateIn/rotateOut)、
淡入淡出(fadeIn/fadeOut)等多達(dá) 60 多種動畫效果, 幾乎包含了所有常見的動畫效果。
雖然借助 animate.css 能夠很方便、快速的制作 CSS3 動畫效果, 但還是建議看看 animate.css 的代碼, 也許你能從中學(xué)到一些東西。
瀏覽器兼容：當(dāng)然是只兼容支持 CSS3 animate 屬性的瀏覽器, 他們分別是：IE10+、Firefox、Chrome、Opera、Safari。
使用
1github官網(wǎng)地址：https://daneden.github.io/animate.css/
中文API地址：http://www.dowebok.com/98.html
使用方法：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
