Lottie 是 Airbnb 推出的一種 SVG 動畫解決方案，它可以跨平臺播放，并解決了動畫落地難的問題。當(dāng)設(shè)計師做完動畫只需使用 bodymovin 將動畫導(dǎo)出成文件再傳給前端，前端就能非?？焖俚匾胛募筒シ艅赢嫛τ?Lottie 的初級使用經(jīng)驗(yàn)，已經(jīng)有很多分享，所以這篇就不再做贅述。但是實(shí)際在使用 AE+Lottie 制作動畫的時候往往會碰到各種問題，所以今天我就結(jié)合我做的禮物動效案例來和大家分享一下使用這個方案制作動畫時常見的錯誤和解決方法。

使用 AE+Lottie 的方案制作 SVG 動畫，要領(lǐng)就是盡量脫離插件和輔助效器，以最質(zhì)樸的方式制作 SVG 動畫。由于動畫在不同的播放端所支持的功能有略微的不同（具體可見下圖），所以在制作的時候我們就要根據(jù)最終動畫的承載端所支持的功能去設(shè)計動畫的方案。

△ http://airbnb.io/Lottie/#/supported-featuresImage title

動畫demo頁面一片空白，動畫未成功加載出來

導(dǎo)出動畫無法顯示是剛開始使用 Lottie 的設(shè)計師經(jīng)常遇到的問題。出現(xiàn)這樣的情況我們右鍵網(wǎng)頁，選擇「調(diào)試」（chrome）或者「檢查模式」（edge）來查看網(wǎng)頁的源碼和 console 中報錯的提示內(nèi)容。如果你完全看不懂播放端的報錯提示，可以請前端小哥哥來幫你解讀一下。

這個報錯的提示能夠大致知道為什么無法播放，大多情況如下。

案例1： 使用第三方動畫素材并導(dǎo)出成SVG動畫

這里我使用了 RTFX 插件其中的一個爆炸素材來進(jìn)行說明。在導(dǎo)出動畫后，demo 頁面空無一物。然后我們來看一下 console 中的報錯提示：

提示結(jié)果時由于 numkeys 無法生成動畫。那么我們回來查看動畫文件當(dāng)中發(fā)現(xiàn)在最外層合成的時間重映射下包含一個表達(dá)式：

T=thisLayer;if((T.marker.numKeys>1)&&(numKeys>3)){sIn=key(2).time-key(1).time;sOut=key(4).time-key(3).time;eIn=T.marker.key(1).time;eOut=T.marker.key(2).time;if(time

這是一段調(diào)整重映射速率的代碼，假設(shè)我不需要調(diào)整速度，所以我直接刪除這段表達(dá)式，再來看看里面的子合成是否會報錯。結(jié)果圖片能顯示但是瀏覽器依然報錯了。

這回是「Cannot read property 'layer' of undefined 」這個錯誤。這個錯誤非常常見，它出現(xiàn)往往意味著你的動畫圖層中運(yùn)用了一些不支持的效果器或者表達(dá)式。

所以想要直接從第三方的素材包導(dǎo)入素材往往會出現(xiàn)各種錯誤，因?yàn)檫@些插件為了讓使用者能充分地自定義風(fēng)格和顏色，往往運(yùn)用了很多自帶的效果器和表達(dá)式。如果你想要使用這些素材，那么就得刪除那些不支持的表達(dá)式、不支持的插件，同時你還必須深入查看動畫文檔的結(jié)構(gòu)，并檢查圖層中是否運(yùn)用了合并路徑或者是圖層混合模式等等。這些插件和表達(dá)式刪除后，如何通過 SVG 動畫支持的方法去重構(gòu)這些效果又是一個問題。由此得知套用第三方的素材需要調(diào)整很多內(nèi)容，還不如自己做。建議還不算很了解 SVG 動畫時，不要使用第三方的素材。

案例2： 使用Joysticks 'n Sliders顯示報錯，無法顯示

目前 bodymovin 支持 duik、Joysticks 'n Sliders、rubberhose 等主流的骨骼綁定插件的大部分功能。但是在使用這些插件制作人物動畫或者骨骼動畫時需要在導(dǎo)出時修改 bodymovin 的設(shè)置。因?yàn)檫@些插件生成的合成結(jié)構(gòu)會包含 guides 圖層，或者一些隱藏的圖層，同時表達(dá)式又指向這些 guides 圖層，所以在導(dǎo)出的時候需要根據(jù)文檔的結(jié)構(gòu)勾選 hidden 和 guides 兩個選項(xiàng)來導(dǎo)出這些圖層。這樣動畫大部分情況下就可以正常加載播放。

除了之前的 Lottie 功能支持表外， 你還可以在這個頁面找到 bodymovin 目前支持的 AE 的功能：https://github.com/airbnb/Lottie-web/wiki。

demo頁面的動畫與AE中的不同

在解決了第一類完全無法加載動畫的問題后，我們進(jìn)入第二類問題，那就是導(dǎo)出的動畫和 AE 中顯示的效果不一致。在這一類中我只列舉了我遇到的問題，如果你有遇到問題且自己解決了，歡迎在評論區(qū)留下評論，以讓更多人知道如何解決它。下面我們來看看具體有哪些問題。

案例1： 漸變無法順利導(dǎo)出

這個情況我想大多人都遇到過，包括很多其他的分享中也有提到。原因是因?yàn)樵诜怯⒄Z編碼下，插件無法執(zhí)行獲取漸變數(shù)據(jù)的代碼。解決方案如下：

根據(jù) bodymovin 作者 hernan 的介紹，AE 中的漸變信息是存儲在 AEP 文件當(dāng)中，所以在你導(dǎo)出漸變的時候務(wù)必先保存文件。另外由于編碼和語言的問題，漸變還是會導(dǎo)出不成功，接著往下看解決方法。

Mac 系統(tǒng)：

• 將 AE 的程序語言改成英語；
• 將動畫文件中的「漸變填充1」改為「Gradient Fill 1 」；
• 保存工程，即可順利導(dǎo)出漸變信息。

Windows 系統(tǒng)：

除了上面的操作外，需要在 1 和 2 的步驟中更改系統(tǒng)的「非unicode程序的語言」。方法如下：控制面板>時鐘和區(qū)域>更改日期、時間或數(shù)字格式>管理>非unicode程序的語言>更改系統(tǒng)區(qū)域設(shè)置>選擇英語（美國），然后重啟電腦。（注：此更改會導(dǎo)致系統(tǒng)中其他的部分軟件出現(xiàn)亂碼現(xiàn)象，所以在導(dǎo)出完成后需要再次改回原來的中文。）

案例2： 自帶效果器無法導(dǎo)出

從上文的鏈接中，我們知道目前 bodymovin 僅僅支持 Drop Shadow、Fill、Pro Levels or Levels（Individual Controls）、Tint、Tritone、Stroke（partially）這幾個 AE 的內(nèi)置插件，所以可以說絕大部分效果都無法被支持，所以自帶的效果器的效果自然無法在播放端顯示。

我以echo這個內(nèi)置插件做了一個參考效果，對比就能看得出兩者差別。既然默認(rèn)的插件不支持，那么我們就得通過其他的手段來復(fù)刻這個效果。那么我們可以復(fù)制多個形狀圖層，并在 positon 中使用表達(dá)式 valueAtTime() 去模擬 echo 這個拖尾的效果。

案例3： 素材缺失導(dǎo)致無法顯示

使用 bodymovin 導(dǎo)出動畫后你會獲得一個 json 的文件。那么在默認(rèn)的導(dǎo)出設(shè)置中，位圖等信息都是通過二次渲染并將渲染后的圖片放在 json 文件的同級目錄中的 images 文件夾中，所以如果有一些動畫必須要使用位圖，那么有兩種選擇。

第一就是將附帶的 images 文件夾一同給到前端；第二種就是在導(dǎo)出設(shè)置中 assets>include in json，選中這個選項(xiàng)。那么 bodymovin 會在導(dǎo)出的時候?qū)⑽粓D信息轉(zhuǎn)成字節(jié)碼并保存在 json 文件當(dāng)中。這樣當(dāng)前端播放的時候就會自動解碼圖片，但是有的時候字節(jié)碼占的空間比 jpeg 更大。

所以在位圖素材不是很大的情況下第二種方案更好，如果在一個工程中位圖有很多，那么建議使用第一種方案。另外，將矢量文件導(dǎo)入 AE 后記得轉(zhuǎn)換成形狀，這樣在導(dǎo)出后就不會丟失矢量素材信息。

案例4： wiggle等表達(dá)式效果不一

雖然 AE 中使用 JavaScript 作為表達(dá)式的語言，但是實(shí)際上它和網(wǎng)頁支持的 JavaScript 有些許不同。根據(jù) hernan 所述，表達(dá)式的轉(zhuǎn)換在導(dǎo)出時會進(jìn)行評估，所以并不是所有表達(dá)式都可以在播放端完美的運(yùn)行，wiggle 函數(shù)就是一個典型例子。

在動畫中，我對 postion 添加了 wiggle(5,50)，但是動畫在網(wǎng)頁中顯示的時候就如鬼畜一般，頻率和偏移量都不對。這是由于目前沒有辦法還原 AE 當(dāng)中的 wiggle 表達(dá)式。要解決這個問題，我們只需要在導(dǎo)出的時候?qū)?wiggle 表達(dá)式烘焙成關(guān)鍵幀即可。

隨著 bodymovin 的更新迭代，目前大部分常用的動畫制作表達(dá)式都慢慢被支持，但是如果你的動畫文件不需要在前端做任何形式的交互，那么建議是將表達(dá)式烘焙成關(guān)鍵幀，以減少播放端的計算壓力。

案例5： 路徑動畫在播放端閃爍或者變形異常

首先要說明的是路徑動畫順滑的前提是每個路徑變化關(guān)鍵幀錨點(diǎn)數(shù)量相同，錨點(diǎn)的起始位置和錨點(diǎn)走向相同。

Lottie 在渲染 SVG 動畫時它的幀率是超過 60 幀的，而往往我們制作動畫時幀率會放到 24 或者 30 幀，甚至更低。那么 Lottie 在播放動畫的時候就會根據(jù)你的關(guān)鍵幀數(shù)據(jù)自動去計算這些多余的補(bǔ)幀。由于上方的動畫在 AE 當(dāng)中本身就是逐幀，所以形狀的變形過程你是看不到的，但是在播放端播放時由于幀率變高，這些變形過程就能被眼睛看到。同時由于制作這些路徑變形動畫沒按正確的方法制作，所以就會在播放端看到變化異?；蛘卟シ女嬅娉閯娱W動的現(xiàn)象。要解決這個問題大致有兩個方法：

• 將路徑的關(guān)鍵幀類型改成 Toggle hold keyframe，這樣前端播放就不會計算中間的數(shù)據(jù)。
• 在前端用 JavaScript 為動畫添加「anim.setSubframe(false);」，這樣前端的播放就會遵循AE當(dāng)中的幀率來播放動畫。

以上就是常見的幾類錯誤和解決方法的歸納。希望對正在使用 Lottie 方案制作動畫的小伙伴有幫助。最后放一些我們工作室做的比較復(fù)雜的 SVG 動畫，并附上下載地址，希望大家喜歡。

△ 通用特效

△ 玉米火箭動畫

△ 火箭動畫

△ 胡蘿卜飛機(jī)動畫

△ 超級火箭動畫