前言
常常 APP 需要一些動畫反饋來提昇用戶感受，通常如果是簡單一點的 xyz 軸平移旋轉，或透明度調整等都會直接跟 APP team 的 RD 們溝通，這樣對 APP 運作的流暢度來說是最好的。
但如果發生以下情境：想在 APP 上製作較ㄏㄧ 花的動畫，RD 那邊剛好也沒有適合的素材，又不想讓 RD 們刻到死，且該介面只會有單個動畫時(確認跑得動)，這樣我就會直接交付 JSON檔。
通常最省時的方式是到 Lottie 上找尋適合的 JSON 動畫素材修改樣式，但如果是較特別的就得 UI 這邊直接用 AE 製作，轉成 JSON，再傳到 Lottie files 或 Figma 預覽。
因為清晰的動畫在使用體驗上較好，所以個人的做法是在 AI 內製作向量圖形，並將每個動件分好圖層，匯入 AE 做動畫，再輸出成 JSON 檔。
詳細步驟分成三個 part 來說明～
一、使用 AE 製作向量動畫
- 在AI將每個動件群組化
- 點選「圖層視窗選單/釋放至圖層」為每個群組個別設立圖層
- 輸入 AI 檔案時選擇composition將每個圖層分批讀入
- 轉成形狀圖層: Layer/Create/Create shapes from Vector
二、使用 Bodymovin 輸出 JSON
- 下載 Bodymovin 套件，下載的 zxp 檔，需透過 Extension Manager Installer 安裝
- 安裝好後，可以在 AE 的 Windows/Extensions/Bodymovin 確認是否可開啟
- 輸出時記得在 設定/Assets 將以下選項勾起來不然輸出時圖片會不見。不過如果是向量動畫，將圖層轉成形狀就不會有掉圖問題(參考1.)
三、在Lottie 或 Figma上預覽JSON
到 Lottie files 上傳剛剛輸出的JSON檔，就能預覽是否能用了!
而且Lottie還為每個動畫提供預覽網址以及複製JSON的網址，對PM和工程師的溝通會變得方便很多。我通常 Hand off 時會在 Figma 上歸類一個 Export Assets 區，然後嵌入 Lottie 的連結並標註@工程師。
值得一提的是，Figma 上也有Lottiefiles 的 plugin，除了可讀入 JSON 檔預覽動畫有沒有問題，也可轉為 GIF 置於畫面內，就能產出高擬真 prototype 先進行測試。不過需要注意的是，轉成 GIF 不能為透明背景，所以遇到要疊加兩個透明背景的 JSON 可能就還是得通靈一下 XD。
