一、前言
Hi，大家好，我是承香墨影！
Lottie 是 Airbnb 開源的一套跨平臺(tái)的完整的動(dòng)畫效果解決方案，用過都說好。完全解耦開發(fā)人員和設(shè)計(jì)師，讓設(shè)計(jì)師設(shè)計(jì)的動(dòng)畫，在程序中無(wú)縫還原，真是一旦拿起絕不放下。
之前也寫過兩篇關(guān)于 Lottie 基礎(chǔ)的文章，還不了解的可以先看看。
Lottie 雖然非常好用，但是從反饋上來(lái)看，還是碰到一些問題。在沒有設(shè)計(jì)師配合的情況下，我們?nèi)绾握业胶线m自己 App 風(fēng)格的 Lottie 動(dòng)畫的 JSON 文件。
之前也介紹過，有一個(gè) LottieFiles 的網(wǎng)站，其內(nèi)提供了很多設(shè)計(jì)師上傳的 Lottie 動(dòng)畫，并提供預(yù)覽的效果，只要我們看中了，就可以下載下來(lái)使用，非常的方便。
雖然這個(gè)網(wǎng)站特別的方便，但是有時(shí)候找到的動(dòng)畫，并不符合我們 App 的風(fēng)格或者我們的主觀需要。
例如這個(gè)動(dòng)畫，如果我們想為圣誕做一個(gè)禮盒動(dòng)畫，找到這個(gè)動(dòng)畫覺得非常的合適，但是想將動(dòng)畫中黃色的絲帶和星星，修改為紅色。怎么辦？難道只能依賴設(shè)計(jì)師小姐姐了嗎？
二、編輯 Lottie 動(dòng)畫
2.1 Lottie-editor
最開始我認(rèn)為動(dòng)畫中，使用到的顏色，應(yīng)該是寫在了 Lottie 動(dòng)畫的 JSON 中，但是實(shí)際你去閱讀 JSON 文件的時(shí)候，是找不到類似 ARGB 或者其他的色值內(nèi)容的，所以也沒辦法通過直接修改 JSON 文件，來(lái)達(dá)到修改動(dòng)畫的目的的。
不過不要緊，我們有工具可以修改它。
今天就再給大家推薦一個(gè) Lottie 動(dòng)畫的編輯器：Lottie-editor。
它已經(jīng)在 Github 上開源，有興趣可以看看源碼。
簡(jiǎn)單來(lái)說，Lottie-editor 為我們提供了編輯現(xiàn)成 Lottie JSON 文件的能力。它可以針對(duì)動(dòng)畫中，不同的顏色進(jìn)行編輯，使用起來(lái)非常的簡(jiǎn)單。
將 JSON 文件拖拽進(jìn) Lottie-editor，左側(cè)的每個(gè)色塊，就對(duì)應(yīng)了當(dāng)前動(dòng)畫中的一個(gè)顏色區(qū)域，我們可以對(duì)其進(jìn)行顏色的修改。一目了然，所見即所得。最終我們可以將我們修改好的動(dòng)畫 JSON 下載下來(lái)就可以直接使用了。
2.2 LottieFiles中編輯
LottieFiles 這個(gè)網(wǎng)站，考慮到快速編輯的問題，本身已經(jīng)支持 Lottie-editor 去編輯動(dòng)畫了。
我們只需要在動(dòng)畫的預(yù)覽界面，點(diǎn)擊右上角的 "Customize with Bodymovin Editor"，即可直接對(duì)該動(dòng)畫進(jìn)行編輯。
三、修改動(dòng)畫 AEP
LottieFiles 還提供了 AE 動(dòng)畫的源文件下載功能（部分支持），這樣假如我們不僅僅是對(duì)動(dòng)畫的顏色不滿意，還需要修改一些更多的細(xì)節(jié)。我們可以將 .aep 的文件一同下載下來(lái)，然后拜托設(shè)計(jì)師小姐姐幫忙修改一下。
注意，一個(gè)支持 AEP 文件下載的 Lottie 動(dòng)畫，都有其獨(dú)特的標(biāo)志。
拿到 AE 源文件之后，就可以根據(jù)自己的需要進(jìn)行微調(diào)了。如果設(shè)計(jì)師小姐姐對(duì) AE 動(dòng)畫不熟悉，也可以讓她通過這樣的方式，學(xué)習(xí)別人制作動(dòng)畫的過程。
好了，對(duì)于 Lottie 動(dòng)畫能自己編輯，就自己編輯吧，實(shí)在不行就抱好小姐姐的大腿。??
今天在公眾號(hào)后臺(tái)回復(fù)成長(zhǎng)『成長(zhǎng)』，將會(huì)得到我整理的一些學(xué)習(xí)資料，也能回復(fù)『加群』，一起學(xué)習(xí)進(jìn)步。
推薦閱讀：
- 漫畫：程序員，你能“管理”好你的產(chǎn)品經(jīng)理嗎？
- 利用 Kotlin 的特性，優(yōu)化 Intent 的數(shù)據(jù)傳遞！
- 解決 Lottie 動(dòng)畫包含圖片的問題！
- Google 的 Flutter 學(xué)習(xí)資料！
- 遠(yuǎn)程控制智能電視，方案已開源！
