AE 製作動畫，使用 Lottie 實作筆記

與工程師協作

Lottie 在 After Effects 擴充了 Bodymovin 功能的套件，能導出 JSON 格式的檔案。

透過 JSON 格式檔案，不僅能在 Lottie 網頁展示動畫效果，還能直接給工程師使用。

這篇記錄 AE 製作動畫的細節，以及輸出 JSON 檔至 Lottie 後呈現的效果。

一、安裝 Bodymovin 套件

1. 前往 Adobe 官網 -> Bodymovin下載位置
2. 安裝完成後，檢查 AE 是否有安裝成功

步驟：工具列 Window / Extensions -> Bodymovin

二、製作動畫

1. ) AI 向量圖

步驟：AI 檔案置入 project 區域 / 將 AI 檔拖拉至製作影格動畫的區域 / 工具列 Layer / Create / 點擊 Create Shapes from Vector Layer

在影格動畫的區域就會建立一個 Outlines 的新檔案，檔案會拆分成小元件，可以針對不同元件製作動畫效果。

2. ) 存檔方式

步驟：工具列 File / Save As -> Save As /自訂檔名.aep

3. ) 匯出影片檔

步驟：先點選製作影格動畫的區域 / 工具列 Compostion / Add Render Queue / 會出現 Render Queue 的輸出序列視窗 -> Qutput To: ______ .mov（底線是輸出後影片的名稱）

p.s 我輸出之後，沒辦法在電腦上讀取，但是傳到 FB、Google 雲端，都是可以讀取的（我目前不知道為什麼會這樣）

4. ) 匯出 JSON 檔

步驟：工具列 Window / Extensions -> Bodymovin / 出現外掛的彈窗 / 點擊右邊更改匯出檔案的位置 / 點擊 Render 匯出檔案

注意事項：匯出的「.json 檔」會是一組程式碼，所以在專案中建立的影片規格，命名要使用英文，工程師才會好判斷。

三、將動畫上傳至 Lottie

1. 前往 Lottie 網站
2. 點擊 preview 就能將輸出的檔案上傳，並且預覽實作成果

三、Lottie 動畫效果

https://lottiefiles.com/share/YlHyLl