超詳細(xì)！寫(xiě)給新人的 Lottie 快速上手指南（下）

前言

對(duì)于設(shè)計(jì)師而言，在使用 lottie 的過(guò)程中，有兩個(gè)難點(diǎn)：第一是導(dǎo)出設(shè)置項(xiàng)，第二是功能支持列表。是否能熟練運(yùn)用 lottie 來(lái)做動(dòng)效落地，主要取決于這兩部分。在上一篇，花了很多篇幅來(lái)為大家介紹 bodymovin（5.9.6）的相關(guān)設(shè)置項(xiàng)。掌握設(shè)置項(xiàng)是玩轉(zhuǎn) lottie 的基礎(chǔ)，那么在這篇，除了功能支持列表，還會(huì)為大家介紹更高級(jí)的使用方法以及相關(guān)注意事項(xiàng)。

位圖 or 矢量

相信使用過(guò) lottie 的同學(xué)，很多情況是通過(guò) ps/ai/sketch 等軟件把樣式合并進(jìn)位圖，導(dǎo)入到 AE 中并生成 lottie 動(dòng)畫(huà)。導(dǎo)入位圖的情況，因?yàn)闃邮蕉伎梢院喜⑦M(jìn)位圖里，所以相對(duì)比較直觀也容易控制，遇到的問(wèn)題也不會(huì)很多，在不考慮文件體積或者屏幕分辨率變化的情況下，確實(shí)也是不錯(cuò)的選擇。

本文想繞過(guò)位圖這種情況，來(lái)討論一下矢量形狀生成的 lottie 動(dòng)畫(huà)。因?yàn)橛檬噶可煽梢愿采w更多的使用場(chǎng)景，文件體積也相對(duì)較小，可編輯性也更強(qiáng)。如果說(shuō)需要用 lottie 來(lái)建立一套動(dòng)效圖標(biāo)組件庫(kù)，或者基于網(wǎng)頁(yè)端和 H5，來(lái)輸出高清動(dòng)畫(huà)表情或 IP 缺省圖動(dòng)畫(huà)，那么矢量的 lottie 動(dòng)畫(huà)一定是更好的選擇了。

網(wǎng)站鏈接： https://lordicon.com/

基于矢量的 lottie 動(dòng)畫(huà)，有更好的編輯性和延展性，示例中不僅可以替換圖標(biāo)局部顏色，還可以切換不同風(fēng)格，本質(zhì)上還是在改變形狀的填充色和描邊色。

以上為 Telegram 和 Discord 的貼紙（高清表情）

國(guó)外已經(jīng)有越來(lái)越多的應(yīng)用選擇 lottie 來(lái)輸出動(dòng)態(tài)表情了。這些表情往往動(dòng)態(tài)效果細(xì)膩，趣味性強(qiáng)。因?yàn)槭噶康奶匦运栽诟鞫松隙寄芮逦某尸F(xiàn)，受到很多用戶的喜愛(ài)。其中為代表的是 Telegram 和 Discord，里面所使用到的貼紙（高清表情），均為 lottie 動(dòng)畫(huà)。

一、功能支持

通過(guò)官方給出的功能支持列表，我們可以得知，lottie 對(duì)矢量圖形有很強(qiáng)的解析能力，并且在 web 端支持的功能是最多的。實(shí)際上，web 對(duì) lottie 動(dòng)畫(huà)支持的效果是最好的，在矢量動(dòng)畫(huà)這部分，lottie 有著很強(qiáng)的優(yōu)勢(shì)。現(xiàn)在很多產(chǎn)品的前端技術(shù)架構(gòu)，web 都占有著很大的比重，用 web 來(lái)取代其他的原生技術(shù)早已是潮流。如果我們的項(xiàng)目前端技術(shù)是基于 web（包括手機(jī)端里的 H5 部分、桌面客戶端里的 H5 部分），那么可以盡情的使用 lottie 來(lái)作為動(dòng)效落地的首選。在 web 端，lottie 擁有著非常廣闊的使用空間，本文的內(nèi)容也是主要圍繞 web 端來(lái)展開(kāi)的。

考察不同效果在原生客戶端（iOS、安卓、windows 和 Mac）的兼容性成本較高，作者會(huì)根據(jù)本身經(jīng)驗(yàn)，對(duì)一些常見(jiàn)已知的兼容問(wèn)題做簡(jiǎn)單的補(bǔ)充。關(guān)于在客戶端各端的支持情況，在這里暫不做系統(tǒng)性的闡述。歡迎有了解的同學(xué)可以共同交流分享。官方給出的功能列表項(xiàng)目有很多，包含著大量的基礎(chǔ)性功能，這類功能我們了解就好。需要格外關(guān)注的功能項(xiàng)其實(shí)只是一少部分，合理的使用好這些功能，就可以做出很多精美的動(dòng)畫(huà)了。在功能推薦時(shí)，將會(huì)省略掉一些功能，比如：矩形、橢圓、填充、描邊、圓角、位移、縮放、旋轉(zhuǎn)、不透明度等這類最最基本的功能。這些功能是絕大多數(shù)動(dòng)效輸出工具都可以支持，在這里就不多做介紹了。

1. lottie-web 常用功能推薦：

我從官方眾多的功能支持項(xiàng)目挑選了一些常用到的功能，同時(shí)也屬于 AE 中的基礎(chǔ)功能，作為個(gè)人推薦。掌握并靈活運(yùn)用好這些功能就可以做出很棒的動(dòng)畫(huà)了。如果是新手可以先以這些功能為出發(fā)點(diǎn)，隨著對(duì) Lottie-web 逐漸熟悉，再去參考官方給出的完整版列表。

1）解析：「漸變描邊」&「修剪路徑」

素材來(lái)源于 Lottiefiles

「漸變描邊」：除了填充屬性可以支持漸變，描邊也是可以支持的。同樣可以支持“線性漸變”和“徑向漸變”兩種形式。而且不論是填充還是描邊，都可以控制漸變的起始點(diǎn)和結(jié)束點(diǎn)，從而來(lái)改變形狀的顏色。這種方式也有一定的使用場(chǎng)景，比如可以讓某些矢量插畫(huà)的背景色進(jìn)行變化，或者將一個(gè)漸變按鈕的不同交互狀態(tài)用這種顏色的變化來(lái)表示等。

其他端兼容性：漸變描邊在 android、ios 客戶端中存在兼容性問(wèn)題，表現(xiàn)為效果不可見(jiàn)；

漸變描邊對(duì)客戶端運(yùn)行的性能損耗較大，建議避免過(guò)多運(yùn)用；

「修剪路徑」：這個(gè)功能通常用來(lái)制作路徑動(dòng)畫(huà)或者字體書(shū)寫(xiě)效果。如果一個(gè)圖層中有多個(gè)路徑，那么也可以支持各路徑“單獨(dú)”修剪或者“同時(shí)”修剪。

2）解析：「蒙版路徑」&「中繼器」

素材來(lái)源于 Lottiefiles

「蒙版路徑」：蒙版支持“相加”和“減去”以及不透明度和各錨點(diǎn)的調(diào)整。有這些功能就可以幫助我們做出很多不錯(cuò)的動(dòng)畫(huà)了。需要提到，蒙版的效果和遮罩類似，根據(jù)不同使用情況來(lái)區(qū)分它們。如果被隱藏的部分需要跟著圖層一起動(dòng)，可以考慮用蒙版，如果被隱藏的部分不需要跟著圖層一起動(dòng)，則可以考慮用遮罩了。

蒙板的性能消耗，跟蒙板的渲染面積以及蒙板的作用對(duì)象面積有關(guān)。如果在效果上需要做選擇的話，優(yōu)先考慮降級(jí)渲染面積大的蒙板。

「中繼器」：中繼器也是很常用的效果，在制作禮花或者水花效果時(shí)常被用到。

3）解析：「Alpha 遮罩」&「Alpha 反轉(zhuǎn)遮罩」

「Alpha 遮罩」&「Alpha 反轉(zhuǎn)遮罩」：Lottie 可以支持 Alpha 遮罩及亮度遮罩，但更為常用的是 Alpha 正反遮罩，所以在這里主要推薦使用 Alpha。

其他端兼容性：遮罩層對(duì)客戶端運(yùn)行性能的損耗很大，建議減少使用，或者相同效果下可以考慮用蒙版替代。

4）解析：「修剪路徑」&「自動(dòng)定向」

修剪路徑上文提到，不再贅述。

「自動(dòng)定向」：主體物可以根據(jù)路徑方向來(lái)調(diào)整自身角度，一般的路徑動(dòng)畫(huà)必備功能。需要注意的是，該功能只能使用在 Lottie-web，其他平臺(tái)暫不支持。

5）解析：「3D 逐字化」

「3D 逐字化」：可以單獨(dú)對(duì)文字進(jìn)行 3D 化的處理，包含“錨點(diǎn)”、“位移”、“不透明度”、“縮放”、“旋轉(zhuǎn)”等效果。也有一定的使用場(chǎng)景，比如可以作為動(dòng)態(tài) banner 模板的文案動(dòng)畫(huà)，設(shè)置好文字動(dòng)畫(huà)后，后面可以通過(guò)調(diào)整代碼來(lái)修改文案內(nèi)容，需注意字?jǐn)?shù)盡量保持一致。

6）說(shuō)明：「預(yù)合成」&「時(shí)間重映射」&「時(shí)間拉伸」

預(yù)合成可以用來(lái)簡(jiǎn)化圖層結(jié)構(gòu)，時(shí)間重映射和時(shí)間拉伸可以調(diào)整動(dòng)畫(huà)最終的節(jié)奏。這些功能在動(dòng)畫(huà)制作中經(jīng)常使用，而且在 lottie-web 中也能得到很好的支持，請(qǐng)放心使用！

2. lottie-web 特殊功能推薦「獨(dú)家」

在實(shí)踐中，會(huì)遇到一些功能，雖然沒(méi)有包含在官方功能支持列表中，但卻能被 Lottie-web 所支持。在文章中會(huì)匯總一些本人在工作中遇到的特殊功能。因?yàn)槟壳霸诰W(wǎng)上社區(qū)或論壇上，沒(méi)有看到有對(duì)這類官方以外功能的系統(tǒng)性介紹，所以此次的介紹暫且冒昧的稱為“獨(dú)家推薦”，如果有其他功能可以補(bǔ)充，歡迎一起交流~

1）解析：「收縮與膨脹」&「圓角」

「收縮與膨脹」&「圓角」：這兩個(gè)效果，沒(méi)有收錄在官方功能列表里，但卻能在 Lottie-web 中很好的展示，做一些星型和花型的圖形動(dòng)畫(huà)，或者是圓角變化的動(dòng)畫(huà)時(shí)，可以考慮使用。

2）解析：「3D 旋轉(zhuǎn)」

「3D 旋轉(zhuǎn)」：在 AE 中打開(kāi)圖層 3D 的開(kāi)關(guān)，就可以使用 3D 相關(guān)功能了，目前在 Lottie-web 中還不支持“攝像機(jī)”圖層的使用（不過(guò)利用 oasis 引擎可以渲染出攝像機(jī)圖層，但成本較高）。需要控制動(dòng)畫(huà)整體角度，可以再鏈接一個(gè)控制圖層來(lái)做角度的控制。需要注意的是，“渲染器模式”目前只支持“經(jīng)典 3D”，并不支持“CINEMA 4D”，所以通過(guò)“CINEMA 4D”來(lái)擠出圖形厚度的方式在 Lottie 中是不支持的。另外，3D 的動(dòng)畫(huà)不要過(guò)于復(fù)雜，尤其是不要給旋轉(zhuǎn)物體做厚度，否則會(huì)出現(xiàn)破面或者圖層順序錯(cuò)亂的情況。

其他端的兼容性：當(dāng)前 Android、iOS 以及 web 的 canvas 模式均不支持 3d 屬性的解析，目前 web 的 svg 模式和 HTML 模式可以支持。

3）解析：常用表達(dá)式

在實(shí)踐中發(fā)現(xiàn) lottie-web 可以支持很多表達(dá)式，在這里總結(jié)幾種 AE 中常用的表達(dá)式，包括“time”、“l(fā)oopIn/loopOut”、“random”以及“萬(wàn)能彈性表達(dá)式”給大家作為參考，wiggle 也常被用到，但目前在 lottie-web 中還原的效果并不好，所以在此就不做推薦了。相信還有更多的表達(dá)式已經(jīng)被支持，只是平時(shí)項(xiàng)目中還未涉及，所以在此不做更深入的討論，歡迎有知道的同學(xué)共同交流~另外：即使是不支持的表達(dá)式，也可以通過(guò)烘焙成關(guān)鍵幀的方式來(lái)導(dǎo)出，但是會(huì)造成 json 文件的體積增大，所以要結(jié)合實(shí)際情況來(lái)考慮使用。

a. 解析：「time 表達(dá)式」

「time 表達(dá)式」：time 表達(dá)式常被用作制作物體旋轉(zhuǎn)或者計(jì)時(shí)的功能，在 lottie-web 中也可以被很好的支持。

time 表達(dá)式作用在數(shù)字上，默認(rèn)小數(shù)點(diǎn)后會(huì)出現(xiàn)多位數(shù)字。可以通過(guò)添加“.toFixed(x)”來(lái)控制小數(shù)點(diǎn)后的位數(shù)，比如“.toFixed(2)”就是小數(shù)點(diǎn)后保留兩位小數(shù)，同理“.toFixed(0)”則只剩整數(shù)。

b. 解析：「loopIn/loopOut 循環(huán)表達(dá)式」

「loopIn/loopOut 循環(huán)表達(dá)式」：循環(huán)表達(dá)式也常常在 AE 動(dòng)畫(huà)中用到，圖中用 loopOut 的四種模式來(lái)舉例，loopIn 也同樣支持。

c. 解析：「random 隨機(jī)表達(dá)式」

「random 隨機(jī)表達(dá)式」：random 隨機(jī)表達(dá)式也可以被支持，可以用在數(shù)字、位置或者顏色的動(dòng)畫(huà)里。

random（min，max）變化會(huì)在最小值（min）和最大值（max）的范圍之間，比如為源文本添加 random（1,20），就代表數(shù)字會(huì)在 1-20 之間隨機(jī)變化。

d. 解析：「萬(wàn)能彈性表達(dá)式」

制作彈性動(dòng)畫(huà)，無(wú)論是直接輸入還是用插件生成，其本質(zhì)都是一段表達(dá)式。非常慶幸 lottie-web 可以很好的支持這類彈性表達(dá)式。

「Overshoot」：使用頻率超高的彈性動(dòng)畫(huà)，可以被用在縮放、位移等屬性中。其中 amp 為振幅、freq 為頻率、decay 為衰減（可以理解為阻力，值越大阻力越大，動(dòng)畫(huà)結(jié)束的越快）。通過(guò)控制這三個(gè)參數(shù)的值來(lái)調(diào)整動(dòng)畫(huà)的。

「Bounce」：使用頻率一般，通常用來(lái)還原真實(shí)的物體落地動(dòng)畫(huà)。其中 e 表示衰減，g 表示重力，nMax 表示彈跳最大值。

4）解析：「高斯模糊」&「設(shè)置遮罩」

「高斯模糊」：在 web 上可以支持高斯模糊的效果，但是模糊數(shù)值不能太大，否則模糊邊緣的地方會(huì)被切掉。

「設(shè)置遮罩」：設(shè)置遮罩也可以在 web 上被支持，但是需要注意目前版本不支持反轉(zhuǎn)遮罩，此功能建議結(jié)合實(shí)際情況來(lái)考慮使用。

5）解析：骨骼綁定插件

我們常見(jiàn)的 AE 骨骼綁定插件有 Duik、RubberHose、Limber 等。這些插件的原理也是在 AE 中生成形狀圖層和參考線圖層來(lái)模擬或控制動(dòng)畫(huà)對(duì)象的肢體，而 lottie 也可以支持這類基礎(chǔ)的圖層，所以骨骼綁定插件制作的動(dòng)畫(huà)也可以在 lottie 上很好的支持。插件 Character Tool 也很常見(jiàn)，但目前 lottie 并不支持，所以在此不做推薦。 需要注意的是：在導(dǎo)出的時(shí)候，需要在設(shè)置里勾選

「Hidden」和「Guides」這兩個(gè)選項(xiàng)。因?yàn)槎鄶?shù)骨骼動(dòng)畫(huà)的控制器是參考線圖層，以及有些圖層是隱藏狀態(tài)。勾選這兩項(xiàng)骨骼動(dòng)畫(huà)就可以正常導(dǎo)出啦。

a. 解析：「Duik Bassel」

Duik 生成的控制器均為參考線圖層，所以 lottie 也能很好的支持 Duik 的骨骼動(dòng)畫(huà)。

b. 解析：「RubberHose」

靜態(tài)素材來(lái)源于網(wǎng)絡(luò)

RubberHose 通過(guò)生成形狀圖層來(lái)模擬肢體，生成的控制器也為參考線圖層，這些都可以被 lottie 所支持。

c. 解析：「Limber」

和 RubberHose 類似，Limber 生成的肢體和控制器也是形狀層和參考線圖層，而且 lottie 對(duì)其支持的效果也很好，這類可以生成肢體的骨骼動(dòng)畫(huà)，優(yōu)先推薦 Limber 來(lái)制作。

6）解析：插件-motion2/motion3/motion4

motion 系列的插件相信使用過(guò) AE 的同學(xué)都不陌生，里面包含了很多實(shí)用快捷的功能。這一系列的插件可以生成基于表達(dá)式的彈性動(dòng)畫(huà)和回彈動(dòng)畫(huà)，也可以被 lottie-web 所支持。如果需要輸出彈性動(dòng)畫(huà)，使用插件生成也是不錯(cuò)的選擇！

二、精準(zhǔn)控制

1. 動(dòng)畫(huà)可交互性

常見(jiàn)的交互方式有下面四種形式：滾輪滑動(dòng)、鼠標(biāo)懸停、鼠標(biāo)點(diǎn)擊和指針移動(dòng)。作為設(shè)計(jì)師可以參考這些交互方式來(lái)規(guī)劃自己的動(dòng)畫(huà)。lottie 動(dòng)畫(huà)可以支持分段播放、正放倒放等功能，結(jié)合這些交互可以做出很多有趣的 lottie 動(dòng)畫(huà)甚至是小游戲。

a.滾輪滑動(dòng)

鼠標(biāo)滾輪可以控制動(dòng)畫(huà)的播放進(jìn)度，也支持更精確的設(shè)定。比如：可以規(guī)定容器劃到 40%的時(shí)候，再開(kāi)始播放動(dòng)畫(huà)。

b.鼠標(biāo)懸停

鼠標(biāo)懸停可以控制動(dòng)畫(huà)的播放或者暫停，以及正放倒放等效果。

c.鼠標(biāo)點(diǎn)擊

點(diǎn)擊也可以控制動(dòng)畫(huà)的播放暫停，以及正放倒放等效果。

d.指針移動(dòng)

根據(jù)指針移動(dòng)可以調(diào)整動(dòng)畫(huà)的播放進(jìn)度，如：左右移動(dòng)可以對(duì)應(yīng)動(dòng)畫(huà)的正放倒放。

這部分僅簡(jiǎn)單介紹 lottie 的幾種交互方式，具體內(nèi)容可查看官方交互指南： https://lottiefiles.com/interactivity

2. 內(nèi)容可編輯性

談到內(nèi)容的編輯性，主要是討論文字內(nèi)容替換和圖片替換這兩種。因?yàn)橐恍﹦?dòng)畫(huà)中的圖文不是固定的，會(huì)因?yàn)椴煌闆r而變化，這時(shí)就需要?jiǎng)討B(tài)替換圖文。對(duì)于這類問(wèn)題，最重要的是讓開(kāi)發(fā)同學(xué)快速的找到要控制的元素，方便后續(xù)相關(guān)參數(shù)的調(diào)整。

圖文動(dòng)態(tài)替換

對(duì)于圖片或者文字，前端同學(xué)可以直接去修改 json 文件里的元素，或者等 json 經(jīng)過(guò)渲染后，去修改 svg 元素。本文會(huì)重點(diǎn)講解后者，前者僅作為了解。不管是哪種方式，本質(zhì)是讓開(kāi)發(fā)同學(xué)快速找到這些要修改的元素。簡(jiǎn)單的舉個(gè)例子：

導(dǎo)出前，我們不要勾選「Glyphs」這項(xiàng)，勾選后文字會(huì)變成路徑而導(dǎo)致無(wú)法修改。還要把「Include in json」勾選上，如果文件中有位圖，那么圖片會(huì)被嵌入到 json 中。為了方便演示和查看，這里把「Pretty print JSON」也勾選上了，但是會(huì)導(dǎo)致體積變大，在實(shí)際項(xiàng)目中請(qǐng)不要勾選這項(xiàng)。

導(dǎo)出后我們可以查看一下 json 里的內(nèi)容：

位圖：會(huì)被放在“assets”數(shù)組中，“p”字段包含的是圖片的地址信息。文字：被放置在“t”字段中。

如果用直接修改 json 的方式，那么其實(shí)就是把圖片的地址更換一下，“t”中的文字的內(nèi)容更換一下，就能達(dá)到圖文替換的目的了。但該方法靈活性有限，在此僅作為了解。

第二種方式就是修改 svg 元素，這也是本文推薦的方式。其方法就是在 AE 圖層名后面添加“#XXX”或者“.XXX”，那么在 svg 動(dòng)畫(huà)中就會(huì)生成相應(yīng)的 Id 名和 class 名，通過(guò)這兩種選擇器開(kāi)發(fā)就可以快速找到要替換的元素了。具體如下圖：

可以看到這種方式的便捷性，設(shè)計(jì)師只需要和開(kāi)發(fā)提前溝通好，在 AE 中添加好 ID 名或者 class 名，后續(xù)開(kāi)發(fā)可以直接找到這些元素，并調(diào)整其相關(guān)屬性了。如修改文本內(nèi)容、修改形狀顏色、替換圖片等。

json 參數(shù)簡(jiǎn)介

為了方便設(shè)計(jì)師和開(kāi)發(fā)同學(xué)理解 json 中的相關(guān)參數(shù)，方便后期更進(jìn)一步的調(diào)整，在這里簡(jiǎn)單介紹一下：

最外層 json：

JSON 最外一層的數(shù)據(jù)，包括一個(gè)動(dòng)畫(huà)的基礎(chǔ)數(shù)據(jù)：動(dòng)畫(huà)幀率、起始/結(jié)束關(guān)鍵幀，動(dòng)畫(huà)的寬高等，還有子圖層的信息和關(guān)聯(lián)的資源信息，如圖片，矢量圖等。

字體集合：

assets 圖片資源集合：

assets 是一個(gè)數(shù)組，資源信息包含的是矢量圖信息，如形狀，大小等等，也包含位圖；還可能是預(yù)合成層，即對(duì)已存在的某些圖層進(jìn)行分組，把它們放置到新的合成中，作為新的一個(gè)資源對(duì)象。

圖層類型 ty

圖層有 6 種類型，不同類型的圖層獲取寬高的方式不同，圖片層需要從關(guān)聯(lián)的 refId 獲取 asset 來(lái)確定寬高，具體如下：

0 代表 comp 預(yù)合成層：從屬性值 w 和 h 獲取

1 代表 solid 固態(tài)層：從屬性值 w 和 h 獲取

2 代表 image 圖片層：從圖片資源屬性獲取

3 代表 null 空?qǐng)D層：從根圖層獲取

4 代表 shape 形狀層：從根圖層獲取

5 代表 text 位置層：從根圖層獲取

如果圖層為形狀層，還會(huì)包含著描述形狀的特征，通過(guò)描邊信息、顏色填充等信。如下：

shape 中的 ty 字段表示 shape 的類型，ty 有以下幾種：

gr(ShapeGroup): 圖形合并

st(ShapeStroke): 圖形描邊

fl(ShapeFill): 圖形填充

tr(ShapeTransform): 圖形變換

sh(ShapePath): 圖形路徑

el(EllipsePath): 橢圓路徑

rc(RectPath): 矩形路徑

tm(trimPath): 修剪路徑

三、常見(jiàn)問(wèn)題

本文匯總了一些輸出時(shí)經(jīng)常會(huì)遇到的問(wèn)題，比如漸變修復(fù)。還有比較好用的小技巧——自動(dòng)追蹤功能，可以把復(fù)雜圖形動(dòng)畫(huà)生成為lottie動(dòng)畫(huà)。

1. 漸變異常修復(fù)

漸變導(dǎo)出時(shí)出現(xiàn)問(wèn)題可能是遇到最多的情況，主要是因?yàn)闈u變?yōu)橹形拿蛘呤敲貜?fù)導(dǎo)致的，在這里分享一下如何解決漸變的問(wèn)題。

常見(jiàn)錯(cuò)誤 1：漸變名為中文，導(dǎo)致出現(xiàn)黑白漸變。解決方式為選中“漸變填充 1”按下回車鍵，此時(shí)就可以編輯名字了，將中文改為英文并立即保存項(xiàng)目，再導(dǎo)出 json 就可以了。需要注意在英文的命名上，盡量以“Gradient Fill”加序號(hào)的形式來(lái)命名，不過(guò)用其他的英文名字也可以支持的。

常見(jiàn)錯(cuò)誤 2：漸變名重復(fù)，導(dǎo)致出現(xiàn)相同顏色。解決方式為將不同顏色用不同英文名字作區(qū)分，例如名字后面加上不同的編號(hào)。

正確展示：要保證漸變名為英文，并且保證不同的顏色使用不同的名字。注意：顏色名必須保證全局唯一，否則會(huì)和其他合成里的顏色沖突。

2. 字體亂碼

字體導(dǎo)出后出現(xiàn)亂碼的情況，首先需要查看是不是「Glyphs」勾選上了，去掉該選項(xiàng)則不會(huì)出現(xiàn)字體亂碼。如果確實(shí)需要勾選「Glyphs」，那么字體亂碼的問(wèn)題很可能是因?yàn)?AE 中文版導(dǎo)致的，可以通過(guò)切換為英文版來(lái)解決該問(wèn)題。

Adobe After Effects 中英文切換需要先找到 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-前往文件夾：/資源庫(kù)/Application Support/Adobe/After Effects/17.0/AMT/

找到文件后先復(fù)制到桌面，然后再打開(kāi)，如果直接本地打開(kāi)修改后是無(wú)法直接保存的。找到里面的語(yǔ)言類型并修改，「zh_CN」為中文，「en_US」為英文，保存后替換原始文件。修改完成后再次打開(kāi) AE 就會(huì)變成所設(shè)置的語(yǔ)言。

切換后就可以完美解決這個(gè)問(wèn)題了：

3. 復(fù)雜形變效果一招搞定——自動(dòng)追蹤

如果有一些無(wú)規(guī)則且復(fù)雜的圖形需要導(dǎo)出為 lottie 動(dòng)畫(huà)，那么可以嘗試使用 AE 中的“自動(dòng)追蹤”功能。因?yàn)閳?zhí)行過(guò)該功能后，會(huì)基于主體再生成一個(gè)有蒙版路徑的動(dòng)畫(huà)，所以基于這個(gè)原理也可以用來(lái)導(dǎo)出 lottie 動(dòng)畫(huà)。不過(guò)需要注意的是：復(fù)雜圖形生成的路徑錨點(diǎn)和關(guān)鍵幀的數(shù)量都比較多，會(huì)使得導(dǎo)出的 json 體積會(huì)很大，所以要根據(jù)情況來(lái)考慮使用。

①準(zhǔn)備：

自動(dòng)追蹤支持視頻、GIF、webp、靜圖等素材，案例中的素材為 webp 格式。

②導(dǎo)入：

自動(dòng)追蹤功能可以將帶透明通道的素材或者有背景的素材提取出來(lái)。只需要在設(shè)置的時(shí)候?qū)⑼ǖ肋x項(xiàng)選為“Alpha”或者“明亮度”即可。

可根據(jù)識(shí)別情況來(lái)調(diào)節(jié)「容差」「閾值」「最小區(qū)域」等參數(shù)來(lái)使路徑更貼合圖形，可以打開(kāi)預(yù)覽實(shí)時(shí)查看路徑的貼合程度。個(gè)人習(xí)慣把「應(yīng)用到新圖層」也打開(kāi)，在一個(gè)新的固態(tài)圖層上去進(jìn)行后續(xù)調(diào)整。

③調(diào)整：

經(jīng)過(guò)轉(zhuǎn)化以后，生成了一個(gè)蒙版路徑的逐幀動(dòng)畫(huà)，因?yàn)槭锹窂剿?lottie 也可以支持。之后可以把蒙版復(fù)制在新的形狀層或者固態(tài)層上，去調(diào)整出一個(gè)自己想要的純色或者漸變色。PS：因?yàn)闀?huì)產(chǎn)生很多路徑錨點(diǎn)和關(guān)鍵幀，所以會(huì)造成 json 文件體積增大，建議酌情挑選時(shí)長(zhǎng)較短和復(fù)雜程度較低的圖形去轉(zhuǎn)換，來(lái)保證最終文件體積不會(huì)過(guò)大。

如果圖形較復(fù)雜，可以酌情刪除一些蒙版路徑和幀。調(diào)整好后把蒙版復(fù)制在一個(gè)新的形狀層上，這樣就可以使用漸變色了，最后導(dǎo)出 json 時(shí)請(qǐng)注意漸變填充的命名方式，一個(gè)復(fù)雜圖形的 lottie 動(dòng)畫(huà)就做好了！

原創(chuàng)不易，轉(zhuǎn)載須經(jīng)作者同意~