程式設計師也想改 Lottie 動畫?是的!

承香墨影發表於2018-04-10

程式設計師也想改 Lottie 動畫?是的!

一、前言

Hi,大家好,我是承香墨影!

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

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

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

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

https://www.lottiefiles.com

程式設計師也想改 Lottie 動畫?是的!

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

程式設計師也想改 Lottie 動畫?是的!

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

二、編輯 Lottie 動畫

2.1 Lottie-editor

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

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

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

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

https://github.com/sonaye/lottie-editor

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

程式設計師也想改 Lottie 動畫?是的!

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

2.2 LottieFiles中編輯

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

程式設計師也想改 Lottie 動畫?是的!

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

三、修改動畫 AEP

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

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

程式設計師也想改 Lottie 動畫?是的!

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

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

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

推薦閱讀:

程式設計師也想改 Lottie 動畫?是的!

相關文章