Lottie 是 Airbnb 推出的一種 SVG 動(dòng)畫(huà)解決方案，它可以跨平臺(tái)播放，并解決了動(dòng)畫(huà)落地難的問(wèn)題。當(dāng)設(shè)計(jì)師做完動(dòng)畫(huà)只需使用 bodymovin 將動(dòng)畫(huà)導(dǎo)出成文件再傳給前端，前端就能非常快速地引入文件和播放動(dòng)畫(huà)。對(duì)于 Lottie 的初級(jí)使用經(jīng)驗(yàn)，已經(jīng)有很多分享，所以這篇就不再做贅述。但是實(shí)際在使用 AE+Lottie 制作動(dòng)畫(huà)的時(shí)候往往會(huì)碰到各種問(wèn)題，所以今天我就結(jié)合我做的禮物動(dòng)效案例來(lái)和大家分享一下使用這個(gè)方案制作動(dòng)畫(huà)時(shí)常見(jiàn)的錯(cuò)誤和解決方法。
使用 AE+Lottie 的方案制作 SVG 動(dòng)畫(huà)，要領(lǐng)就是盡量脫離插件和輔助效器，以最質(zhì)樸的方式制作 SVG 動(dòng)畫(huà)。由于動(dòng)畫(huà)在不同的播放端所支持的功能有略微的不同（具體可見(jiàn)下圖），所以在制作的時(shí)候我們就要根據(jù)最終動(dòng)畫(huà)的承載端所支持的功能去設(shè)計(jì)動(dòng)畫(huà)的方案。
△ http://airbnb.io/Lottie/#/supported-featuresImage title
導(dǎo)出動(dòng)畫(huà)無(wú)法顯示是剛開(kāi)始使用 Lottie 的設(shè)計(jì)師經(jīng)常遇到的問(wèn)題。出現(xiàn)這樣的情況我們右鍵網(wǎng)頁(yè)，選擇「調(diào)試」（chrome）或者「檢查模式」（edge）來(lái)查看網(wǎng)頁(yè)的源碼和 console 中報(bào)錯(cuò)的提示內(nèi)容。如果你完全看不懂播放端的報(bào)錯(cuò)提示，可以請(qǐng)前端小哥哥來(lái)幫你解讀一下。
這個(gè)報(bào)錯(cuò)的提示能夠大致知道為什么無(wú)法播放，大多情況如下。
案例1： 使用第三方動(dòng)畫(huà)素材并導(dǎo)出成SVG動(dòng)畫(huà)
這里我使用了 RTFX 插件其中的一個(gè)爆炸素材來(lái)進(jìn)行說(shuō)明。在導(dǎo)出動(dòng)畫(huà)后，demo 頁(yè)面空無(wú)一物。然后我們來(lái)看一下 console 中的報(bào)錯(cuò)提示：
提示結(jié)果時(shí)由于 numkeys 無(wú)法生成動(dòng)畫(huà)。那么我們回來(lái)查看動(dòng)畫(huà)文件當(dāng)中發(fā)現(xiàn)在最外層合成的時(shí)間重映射下包含一個(gè)表達(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á)式，再來(lái)看看里面的子合成是否會(huì)報(bào)錯(cuò)。結(jié)果圖片能顯示但是瀏覽器依然報(bào)錯(cuò)了。
這回是「Cannot read property 'layer' of undefined 」這個(gè)錯(cuò)誤。這個(gè)錯(cuò)誤非常常見(jiàn)，它出現(xiàn)往往意味著你的動(dòng)畫(huà)圖層中運(yùn)用了一些不支持的效果器或者表達(dá)式。
所以想要直接從第三方的素材包導(dǎo)入素材往往會(huì)出現(xiàn)各種錯(cuò)誤，因?yàn)檫@些插件為了讓使用者能充分地自定義風(fēng)格和顏色，往往運(yùn)用了很多自帶的效果器和表達(dá)式。如果你想要使用這些素材，那么就得刪除那些不支持的表達(dá)式、不支持的插件，同時(shí)你還必須深入查看動(dòng)畫(huà)文檔的結(jié)構(gòu)，并檢查圖層中是否運(yùn)用了合并路徑或者是圖層混合模式等等。這些插件和表達(dá)式刪除后，如何通過(guò) SVG 動(dòng)畫(huà)支持的方法去重構(gòu)這些效果又是一個(gè)問(wèn)題。由此得知套用第三方的素材需要調(diào)整很多內(nèi)容，還不如自己做。建議還不算很了解 SVG 動(dòng)畫(huà)時(shí)，不要使用第三方的素材。
案例2： 使用Joysticks 'n Sliders顯示報(bào)錯(cuò)，無(wú)法顯示
目前 bodymovin 支持 duik、Joysticks 'n Sliders、rubberhose 等主流的骨骼綁定插件的大部分功能。但是在使用這些插件制作人物動(dòng)畫(huà)或者骨骼動(dòng)畫(huà)時(shí)需要在導(dǎo)出時(shí)修改 bodymovin 的設(shè)置。因?yàn)檫@些插件生成的合成結(jié)構(gòu)會(huì)包含 guides 圖層，或者一些隱藏的圖層，同時(shí)表達(dá)式又指向這些 guides 圖層，所以在導(dǎo)出的時(shí)候需要根據(jù)文檔的結(jié)構(gòu)勾選 hidden 和 guides 兩個(gè)選項(xiàng)來(lái)導(dǎo)出這些圖層。這樣動(dòng)畫(huà)大部分情況下就可以正常加載播放。
除了之前的 Lottie 功能支持表外， 你還可以在這個(gè)頁(yè)面找到 bodymovin 目前支持的 AE 的功能：https://github.com/airbnb/Lottie-web/wiki。
在解決了第一類完全無(wú)法加載動(dòng)畫(huà)的問(wèn)題后，我們進(jìn)入第二類問(wèn)題，那就是導(dǎo)出的動(dòng)畫(huà)和 AE 中顯示的效果不一致。在這一類中我只列舉了我遇到的問(wèn)題，如果你有遇到問(wèn)題且自己解決了，歡迎在評(píng)論區(qū)留下評(píng)論，以讓更多人知道如何解決它。下面我們來(lái)看看具體有哪些問(wèn)題。
案例1： 漸變無(wú)法順利導(dǎo)出
這個(gè)情況我想大多人都遇到過(guò)，包括很多其他的分享中也有提到。原因是因?yàn)樵诜怯⒄Z(yǔ)編碼下，插件無(wú)法執(zhí)行獲取漸變數(shù)據(jù)的代碼。解決方案如下：
根據(jù) bodymovin 作者 hernan 的介紹，AE 中的漸變信息是存儲(chǔ)在 AEP 文件當(dāng)中，所以在你導(dǎo)出漸變的時(shí)候務(wù)必先保存文件。另外由于編碼和語(yǔ)言的問(wèn)題，漸變還是會(huì)導(dǎo)出不成功，接著往下看解決方法。
Mac 系統(tǒng)：
- 將 AE 的程序語(yǔ)言改成英語(yǔ)；
- 將動(dòng)畫(huà)文件中的「漸變填充1」改為「Gradient Fill 1 」；
- 保存工程，即可順利導(dǎo)出漸變信息。
Windows 系統(tǒng)：
除了上面的操作外，需要在 1 和 2 的步驟中更改系統(tǒng)的「非unicode程序的語(yǔ)言」。方法如下：控制面板>時(shí)鐘和區(qū)域>更改日期、時(shí)間或數(shù)字格式>管理>非unicode程序的語(yǔ)言>更改系統(tǒng)區(qū)域設(shè)置>選擇英語(yǔ)（美國(guó)），然后重啟電腦。（注：此更改會(huì)導(dǎo)致系統(tǒng)中其他的部分軟件出現(xiàn)亂碼現(xiàn)象，所以在導(dǎo)出完成后需要再次改回原來(lái)的中文。）
案例2： 自帶效果器無(wú)法導(dǎo)出
從上文的鏈接中，我們知道目前 bodymovin 僅僅支持 Drop Shadow、Fill、Pro Levels or Levels（Individual Controls）、Tint、Tritone、Stroke（partially）這幾個(gè) AE 的內(nèi)置插件，所以可以說(shuō)絕大部分效果都無(wú)法被支持，所以自帶的效果器的效果自然無(wú)法在播放端顯示。
我以echo這個(gè)內(nèi)置插件做了一個(gè)參考效果，對(duì)比就能看得出兩者差別。既然默認(rèn)的插件不支持，那么我們就得通過(guò)其他的手段來(lái)復(fù)刻這個(gè)效果。那么我們可以復(fù)制多個(gè)形狀圖層，并在 positon 中使用表達(dá)式 valueAtTime() 去模擬 echo 這個(gè)拖尾的效果。
案例3： 素材缺失導(dǎo)致無(wú)法顯示
使用 bodymovin 導(dǎo)出動(dòng)畫(huà)后你會(huì)獲得一個(gè) json 的文件。那么在默認(rèn)的導(dǎo)出設(shè)置中，位圖等信息都是通過(guò)二次渲染并將渲染后的圖片放在 json 文件的同級(jí)目錄中的 images 文件夾中，所以如果有一些動(dòng)畫(huà)必須要使用位圖，那么有兩種選擇。
第一就是將附帶的 images 文件夾一同給到前端；第二種就是在導(dǎo)出設(shè)置中 assets>include in json，選中這個(gè)選項(xiàng)。那么 bodymovin 會(huì)在導(dǎo)出的時(shí)候?qū)⑽粓D信息轉(zhuǎn)成字節(jié)碼并保存在 json 文件當(dāng)中。這樣當(dāng)前端播放的時(shí)候就會(huì)自動(dòng)解碼圖片，但是有的時(shí)候字節(jié)碼占的空間比 jpeg 更大。
所以在位圖素材不是很大的情況下第二種方案更好，如果在一個(gè)工程中位圖有很多，那么建議使用第一種方案。另外，將矢量文件導(dǎo)入 AE 后記得轉(zhuǎn)換成形狀，這樣在導(dǎo)出后就不會(huì)丟失矢量素材信息。
案例4： wiggle等表達(dá)式效果不一
雖然 AE 中使用 JavaScript 作為表達(dá)式的語(yǔ)言，但是實(shí)際上它和網(wǎng)頁(yè)支持的 JavaScript 有些許不同。根據(jù) hernan 所述，表達(dá)式的轉(zhuǎn)換在導(dǎo)出時(shí)會(huì)進(jìn)行評(píng)估，所以并不是所有表達(dá)式都可以在播放端完美的運(yùn)行，wiggle 函數(shù)就是一個(gè)典型例子。
在動(dòng)畫(huà)中，我對(duì) postion 添加了 wiggle(5,50)，但是動(dòng)畫(huà)在網(wǎng)頁(yè)中顯示的時(shí)候就如鬼畜一般，頻率和偏移量都不對(duì)。這是由于目前沒(méi)有辦法還原 AE 當(dāng)中的 wiggle 表達(dá)式。要解決這個(gè)問(wèn)題，我們只需要在導(dǎo)出的時(shí)候?qū)?wiggle 表達(dá)式烘焙成關(guān)鍵幀即可。
隨著 bodymovin 的更新迭代，目前大部分常用的動(dòng)畫(huà)制作表達(dá)式都慢慢被支持，但是如果你的動(dòng)畫(huà)文件不需要在前端做任何形式的交互，那么建議是將表達(dá)式烘焙成關(guān)鍵幀，以減少播放端的計(jì)算壓力。
案例5： 路徑動(dòng)畫(huà)在播放端閃爍或者變形異常
首先要說(shuō)明的是路徑動(dòng)畫(huà)順滑的前提是每個(gè)路徑變化關(guān)鍵幀錨點(diǎn)數(shù)量相同，錨點(diǎn)的起始位置和錨點(diǎn)走向相同。
Lottie 在渲染 SVG 動(dòng)畫(huà)時(shí)它的幀率是超過(guò) 60 幀的，而往往我們制作動(dòng)畫(huà)時(shí)幀率會(huì)放到 24 或者 30 幀，甚至更低。那么 Lottie 在播放動(dòng)畫(huà)的時(shí)候就會(huì)根據(jù)你的關(guān)鍵幀數(shù)據(jù)自動(dòng)去計(jì)算這些多余的補(bǔ)幀。由于上方的動(dòng)畫(huà)在 AE 當(dāng)中本身就是逐幀，所以形狀的變形過(guò)程你是看不到的，但是在播放端播放時(shí)由于幀率變高，這些變形過(guò)程就能被眼睛看到。同時(shí)由于制作這些路徑變形動(dòng)畫(huà)沒(méi)按正確的方法制作，所以就會(huì)在播放端看到變化異常或者播放畫(huà)面抽動(dòng)閃動(dòng)的現(xiàn)象。要解決這個(gè)問(wèn)題大致有兩個(gè)方法：
- 將路徑的關(guān)鍵幀類型改成 Toggle hold keyframe，這樣前端播放就不會(huì)計(jì)算中間的數(shù)據(jù)。
- 在前端用 JavaScript 為動(dòng)畫(huà)添加「anim.setSubframe(false);」，這樣前端的播放就會(huì)遵循AE當(dāng)中的幀率來(lái)播放動(dòng)畫(huà)。
以上就是常見(jiàn)的幾類錯(cuò)誤和解決方法的歸納。希望對(duì)正在使用 Lottie 方案制作動(dòng)畫(huà)的小伙伴有幫助。最后放一些我們工作室做的比較復(fù)雜的 SVG 動(dòng)畫(huà)，并附上下載地址，希望大家喜歡。
△ 通用特效
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
熱評(píng) 蜘蛛俠 · 格溫