前言

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

位圖or矢量

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

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

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

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

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

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

1.功能支持

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

考察不同效果在原生客戶端（iOS、安卓、windows和Mac）的兼容性成本較高，作者會根據(jù)本身經(jīng)驗(yàn)，對一些常見已知的兼容問題做簡單的補(bǔ)充。關(guān)于在客戶端各端的支持情況，在這里暫不做系統(tǒng)性的闡述。歡迎有了解的同學(xué)可以共同交流分享。


官方給出的功能列表項(xiàng)目有很多，包含著大量的基礎(chǔ)性功能，這類功能我們了解就好。需要格外關(guān)注的功能項(xiàng)其實(shí)只是一少部分，合理的使用好這些功能，就可以做出很多精美的動畫了。在功能推薦時(shí)，將會省略掉一些功能，比如：矩形、橢圓、填充、描邊、圓角、位移、縮放、旋轉(zhuǎn)、不透明度等這類最最基本的功能。這些功能是絕大多數(shù)動效輸出工具都可以支持，在這里就不多做介紹了。

1.1 lottie-web 常用功能推薦：

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

1.解析：【漸變描邊】&【修剪路徑】

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

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

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

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

2.解析：【蒙版路徑】&【中繼器】

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

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

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

3.解析：【Alpha遮罩】&【Alpha反轉(zhuǎn)遮罩】

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

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

4.解析：【修剪路徑】&【自動定向】

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

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

5.解析：【3D逐字化】

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

6.說明：【預(yù)合成】&【時(shí)間重映射】&【時(shí)間拉伸】

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

1.2 lottie-web 特殊功能推薦【獨(dú)家】

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

1.解析：【收縮與膨脹】&【圓角】

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

2.解析：【3D旋轉(zhuǎn)】

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

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

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

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

a.解析：【time 表達(dá)式】

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

time表達(dá)式作用在數(shù)字上，默認(rèn)小數(shù)點(diǎn)后會出現(xiàn)多位數(shù)字。可以通過添加“.toFixed(x)”來控制小數(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動畫中用到，圖中用loopOut的四種模式來舉例，loopIn也同樣支持。

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

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

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

d.解析：【萬能彈性表達(dá)式】

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

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

【Bounce】：使用頻率一般，通常用來還原真實(shí)的物體落地動畫。其中e表示衰減，g表示重力，nMax表示彈跳最大值。

4.解析：【高斯模糊】&【設(shè)置遮罩】

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

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

5.解析：骨骼綁定插件

我們常見的AE骨骼綁定插件有Duik、RubberHose、Limber等。這些插件的原理也是在AE中生成形狀圖層和參考線圖層來模擬或控制動畫對象的肢體，而lottie也可以支持這類基礎(chǔ)的圖層，所以骨骼綁定插件制作的動畫也可以在lottie上很好的支持。插件Character Tool也很常見，但目前l(fā)ottie并不支持，所以在此不做推薦。
需要注意的是：在導(dǎo)出的時(shí)候，需要在設(shè)置里勾選【Hidden】和【Guides】這兩個(gè)選項(xiàng)。因?yàn)槎鄶?shù)骨骼動畫的控制器是參考線圖層，以及有些圖層是隱藏狀態(tài)。勾選這兩項(xiàng)骨骼動畫就可以正常導(dǎo)出啦。

a.解析：【Duik Bassel】

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

b.解析：【RubberHose】

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

c.解析：【Limber】

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

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

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

2.精準(zhǔn)控制

2.1 動畫可交互性

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

a.滾輪滑動

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

b.鼠標(biāo)懸停

鼠標(biāo)懸?？梢钥刂苿赢嫷牟シ呕蛘邥和＃约罢诺狗诺刃Ч?。

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

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

d.指針移動

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

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

2.2 內(nèi)容可編輯性

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

圖文動態(tài)替換

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

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

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

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

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

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

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

json參數(shù)簡介

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

最外層json：

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

字體集合：

assets 圖片資源集合：

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

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

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

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

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

3 代表null 空圖層：從根圖層獲取

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

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

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

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

gr(ShapeGroup): 圖形合并

st(ShapeStroke): 圖形描邊

fl(ShapeFill): 圖形填充

tr(ShapeTransform): 圖形變換

sh(ShapePath): 圖形路徑

el(EllipsePath): 橢圓路徑

rc(RectPath): 矩形路徑

tm(trimPath): 修剪路徑

3.常見問題

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

3.1 漸變異常修復(fù)

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

常見錯誤1：

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

常見錯誤2：

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

正確展示：

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

3.2 字體亂碼

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

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-前往文件夾：/資源庫/Application Support/Adobe/After Effects/17.0/AMT/

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

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

3.3 復(fù)雜形變效果一招搞定——自動追蹤

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

1-準(zhǔn)備：

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

2-導(dǎo)入：

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

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

3-調(diào)整：

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

?? ? ? ? ? ? ? ? ? ??

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

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

? ? ? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ? ??