前言:

之前文章有提到After Effects在向量動畫匯出/匯入的外掛插件BodyMovin，可以直接使用設計師慣用的After Effect去產生向量2D動畫，然後再將這樣的2D SVG動畫匯出到網頁HTML或Android與iOS系統中使用。

這裡要介紹的剛好是反過來，直接從外部別人做好的向量動畫的檔案匯入到AE中，也就是文章的主角 – LottieFiles，一個分享向量動畫作品的平台。在介紹它之前，一定要先知道什麼是Lottie。

關於Lottie:

它是由Airbnb團隊所發展的，Lottie是一套設計與開發用的Library，設計師可將After Effects動畫透過外掛插件將一整段向量動畫轉出JSON檔案。而開發人員可以透過該Library將設計師所做出來的動畫JSON資料，應用在iOS、MacOS、Android與React Native等的原生App。

Lottie存在的意義就是讓設計師可以透過這樣的向量動畫工具，設計出更好的動畫效果來提升APP / 網站的使用者體驗。

有興趣想知道Lottie發展沿革的人可以點這裡

想知道更多Lottie開源項目的人可以點這裡

不多說先來一張圖，這是Airbnb Lottie網站的範例。若用在App或網頁上，效果相當完美。

關於LottieFiles:

LottieFiles就像是Dribbble這樣的平台，只是它只針對使用Lottie製作出來的向量動畫，換句話說LottieFiles就是一個設計師分享的展示平台。你可以分享自己的向量動畫作品，讓大家認識你。

同時平台也提供很棒的工具，讓你可以快速的套用程式碼在各系統平台上。

如下圖，選取別人分享的動畫以後，只要點進去，就可以看到右邊有許多套用該動畫的按鈕，輕輕按下按鈕，就會生成對應平台所需要的程式碼。相當方便。

就像下面別人分享的萬聖節南瓜安卓機器人動畫，只要點下HTML5的按鈕，就出現了範例代碼。

The Pumpkin Lord : Give a credit to Vishal Sehgal

Lottie匯入After Effects實作:

到平台上可以找到自己覺得有趣的動畫，按下Play看看細節。接著我們可以按下Download JSON

每個動畫可以下載的格式不盡相同，但若要能匯入AE，就要選擇JSON

這邊我們就先下載一個試試看

接著進入AE，開啟BodyMovin外掛插件，點選 “Import Lottie Animati…”

這時候我們只要指向剛剛下載的JSON檔案即可。

過一會兒工夫，BodyMovin外掛插件就幫我們把動畫中的所有元素，逐層匯入AE，並且每一個元素都是一個Path圖層。

轉換的過程有報錯，大概意思就是顏色漸層不如原本的設計。

可以看到每個動畫元素都是分離拆開的，意思就是若你要拿來修改製作成你自己想要的影片樣式，技術上是沒問題的。

整包向量動畫自動被包裝成一個Composition，相當好管理。

以上就是實際從LottieFiles把向量動畫匯入AfterEffects的操作教學囉。

小結:

根據這次實測的結果，部分的填色進入AE以後，有小部分出錯，但最動畫元素中最重要的整體形狀與動畫形變都是正確的，因此這樣的工具確實可以讓我們加速了解別人的創意，也可以將常用；無關抄襲的元件修改變成己用。

更重要的是了解這樣的流程，未來若有需要就可以直接拿來使用。

工具的演進是越來越方便，使用者體驗意識抬頭後，很多人會幫忙設計師把圖形動畫的開發需求應用在目標應用程式上。只是設計師也要常常去看市面上有什麼現成的工具。除了避免重新發明輪子外，更重要的是透過有效率的工具，提升質感與效率外。也讓自己的人生，有多一點的時間，專注在更好的設計上。

今天LottieFiles就介紹到這邊了。更多實際的應用可以參考另一篇從AE使用BodyMovin匯出向量動畫的JSON檔案，並且應用在各平台上。