讓插圖動畫不再又笨又重—利用AI＋AE製作Lottie動畫(做法詳解)
在製作網頁、App時，為了讓內容看起來更生動，我們常常會選擇在頁面中加入一些插圖動畫，最常見、簡單的方式是製作Gif的圖片貼到對應頁面上。
但在Google越來越重視網站的使用體驗下，檔案體積過大的Gif可能會使得頁面載入效能變慢，進而影響SEO的分數，且Gif無法在頁面上進行互動操控。
而 Lottie 能夠解決上面所有的問題
什麼是Lottie 呢？它是Airbnb 推出的函式庫（Library），可以在 iOS、Android、網頁及MacOS、Windows 等作業系統上使用，透過一個叫做Bodymovin的外掛，將 AE 做的動畫匯出成 Json檔，讓工程師將檔案嵌入程式碼中，就可以了。
Lottie有幾個非常棒的優點：
- 它是免費的（目前）
- 檔案小、效能高
- 可以在不同裝置、作業系統上使用
- 動畫的品質很好
- 可以進行互動操控
詳細介紹可見官網
比起Gif圖檔，製作Lottie的動畫多了幾個繁瑣的步驟，但是操作過一次之後，未來在製作上就會變得很順手！以下是我個人製作Lottie動畫的過程分享，沒有標準的程序，提供大家參考。
步驟一：安裝 Bodymovin
1.首先需要下載 ZXP 的安裝程序，用來在AE中安裝Bodymovin的外掛。
2.接著去Github下載最新的bodymovin extension。
3.打開 ZXP 安裝程序，並將 bodymovin 拖拉到視窗中。
4.這時候回到AE，打開Window＞Extensions。如果已經有看到bodymovin在裡面，就代表安裝成功了。
步驟二：AI製作向量插圖
安裝完成後回到AI，打開預計要製作成動畫的檔案。
（我自己的習慣是在AI中製作向量插圖，如果有自己習慣的別種軟體，步驟二可以跳過沒關係。）
因為AI的預設是把所有的向量圖檔設為路徑包起來，所以可以看到現在元素都在同一個圖層中。
但是AE是以圖層的方式匯入檔案，這時候如果直接將檔案匯入，所有的元件將會黏在一起，沒辦法單獨做動畫上的調整，
1.於是首先要把每一個向量的「路徑」變成獨立的「圖層」。選取包含所有元素的圖層，按下右上角的漢堡。
點選「釋放至圖層（順序）」。
這時所有的路徑都變成圖層了。
2.接下來我會在AI中整理所有的圖層，把預計要共同做調整的元素放入同一個圖層中，並加入命名，這樣進到AE時才不容易混淆。
步驟三：匯入AE，製作動畫
1.把調整過後的AI檔存起來後，進到AE，點選import＞File匯入檔案。
2.在匯入檔案前，記得將Import Kind中的footage(預設值)改成Composition，表示要讓每一個圖層都被分別匯入成個別的素材，並在Footage Dimensions中選擇Layer Size，表示所有匯入的圖層都會以自己的中心點當作軸心。
3.檔案匯入後，點擊Composition的檔案兩下，下方編輯動畫的區塊就會出現所有圖層了！
這時候就可以開始編輯動畫了。
步驟四：輸出Lottie動畫
在AE中製作完動畫後，接著就要進行輸出。
在輸出前，為了避免AI檔的圖層轉出後像這樣無法被辨識，我們需要先將AI圖層換成向量圖層。
1.選取所有的圖層，按右鍵＞Create＞Create Shapes from Vector Layer，讓所有的AI圖層新增向量圖層。
——＞ — — ＞
2.因為隱私權政策的關係，接下來要先讓AE同意這個檔案可以在網路上使用才能夠輸出，打開After Effects＞Preferences＞Scripting&Expressions。
將Allow Scripts to Write Files and Access Network的選項打勾。
3.完成同意後，打開Bodymovin，點選「⋯」，設定檔案要輸出的位置。
4.勾選要Render的檔案。
5.按下Render輸出。
成功輸出後，就會跑出工程師用的Json檔了。
6.最後，可以去Lottie的測試網站，測試看看製作的動畫有沒有成功動起來。
然後就可以把Json檔傳給工程師拉～撒花(*´∀`)~♥
雖然Lottie目前還是有一些缺點，比如不支援某些效果，但我自己覺得還是瑕不掩瑜，至少目前來說已經非常夠用。
參考資料：
