一、前言

Hi，大家好，我是承香墨影！

Lottie 是 Airbnb 開源的一套跨平臺的完整的動畫效果解決方案，用過都說好。完全解耦開發人員和設計師，讓設計師設計的動畫，在程式中無縫還原，真是一旦拿起絕不放下。

之前也寫過兩篇關於 Lottie 基礎的文章，還不瞭解的可以先看看。

Lottie 雖然非常好用，但是從反饋上來看，還是碰到一些問題。在沒有設計師配合的情況下，我們如何找到合適自己 App 風格的 Lottie 動畫的 JSON 檔案。

之前也介紹過，有一個 LottieFiles 的網站，其內提供了很多設計師上傳的 Lottie 動畫，並提供預覽的效果，只要我們看中了，就可以下載下來使用，非常的方便。

雖然這個網站特別的方便，但是有時候找到的動畫，並不符合我們 App 的風格或者我們的主觀需要。

例如這個動畫，如果我們想為聖誕做一個禮盒動畫，找到這個動畫覺得非常的合適，但是想將動畫中黃色的絲帶和星星，修改為紅色。怎麼辦？難道只能依賴設計師小姐姐了嗎？

二、編輯 Lottie 動畫

2.1 Lottie-editor

最開始我認為動畫中，使用到的顏色，應該是寫在了 Lottie 動畫的 JSON 中，但是實際你去閱讀 JSON 檔案的時候，是找不到類似 ARGB 或者其他的色值內容的，所以也沒辦法通過直接修改 JSON 檔案，來達到修改動畫的目的的。

不過不要緊，我們有工具可以修改它。

今天就再給大家推薦一個 Lottie 動畫的編輯器：Lottie-editor。

它已經在 Github 上開源，有興趣可以看看原始碼。

簡單來說，Lottie-editor 為我們提供了編輯現成 Lottie JSON 檔案的能力。它可以針對動畫中，不同的顏色進行編輯，使用起來非常的簡單。

將 JSON 檔案拖拽進 Lottie-editor，左側的每個色塊，就對應了當前動畫中的一個顏色區域，我們可以對其進行顏色的修改。一目瞭然，所見即所得。最終我們可以將我們修改好的動畫 JSON 下載下來就可以直接使用了。

2.2 LottieFiles中編輯

LottieFiles 這個網站，考慮到快速編輯的問題，本身已經支援 Lottie-editor 去編輯動畫了。

我們只需要在動畫的預覽介面，點選右上角的 “Customize with Bodymovin Editor“，即可直接對該動畫進行編輯。

三、修改動畫 AEP

LottieFiles 還提供了 AE 動畫的原始檔下載功能（部分支援），這樣假如我們不僅僅是對動畫的顏色不滿意，還需要修改一些更多的細節。我們可以將 .aep 的檔案一同下載下來，然後拜託設計師小姐姐幫忙修改一下。

注意，一個支援 AEP 檔案下載的 Lottie 動畫，都有其獨特的標誌。

拿到 AE 原始檔之後，就可以根據自己的需要進行微調了。如果設計師小姐姐對 AE 動畫不熟悉，也可以讓她通過這樣的方式，學習別人製作動畫的過程。

好了，對於 Lottie 動畫能自己編輯，就自己編輯吧，實在不行就抱好小姐姐的大腿。��

今天在公眾號後臺回覆成長『成長』，將會得到我整理的一些學習資料，也能回覆『加群』，一起學習進步。

推薦閱讀：