Lottie 踩雷一籮筐
說是踩雷，個人還是覺得 Lottie 的開發人員可以得諾貝爾和平獎。
諾貝爾和平獎授予對象：為促進設計師與工程師團結友好、取消或裁減開發成本以及為共同目標的組織和宣傳盡到最大努力或作出最大貢獻的人。
可以吧？
目前為 UI/UX 設計師，在設計靜態介面以外，也會時常需要考慮到交互及動態設計。前陣子製作幾個小動畫要用於網頁上，結果遇到一些瓶頸，差點以為自己花了那些時間製作的動畫，將面臨永遠無法實際使用的窘境。
之前有做過動畫並透過 Lottie 完美呈現於網站過，不同的是，這次的動畫比之前的相較複雜些，不再只是向量的變化，圖層元素多了影片還有文字等等……輸出的問題也跟著變多了，中間來來回回地嘗試，最後終於成功了，也著實對於 Lottie 有了更深的佩服。
以下是我在 AE 製作動畫時，用 Bodymovin 要 Render 動畫時碰壁幾次的經驗，若是剛好也有遇到相同問題，你剛好看見這篇文章，那你真幸運！至少不用在那邊跟工程師來來回回，無限循環的「再試一次看看」，對吧？
第一雷：動畫有在動，但圖片顯示不出來。
有在用 Ai 的大家應該都知道，只要把圖片置入檔案就不會掉圖，但是 AE 到底是哪裡可以置入圖片？！
找了很久都沒有（因為就是沒有），其實只要在 Bodymovin 輸出視窗中
點選Settings > Assets>
把以下選項打勾 ：
Include in json
Include rasterized images encoded in the json
再 Render一次就會出現奇蹟了！
第二雷：不支援影片。
這次的動畫有置入一些影片檔，結果發現 Bodymovin 似乎不支援。
解法：置入影片的內容是類似由左至右出現的線性動畫，最後透過調整 Mask Path 做出同樣效果。
第三雷：不支援轉場效果。
Lottie介紹網站中，有特別說明有關 Bodymovin 在 AE 操作上支援的功能，網站上表示 AE 效果選單裡的效果都不支援，不過這應該是保險的說法，因為我有使用 Expression Controls 裡的效果並且有成功輸出過。所以當你真的不想放棄動畫選單裡的效果，而製作動畫時程又不緊迫的話，不仿也可以花些時間試試看，其實有些效果還是可行的。
解法：原本是用 Gradient Wipe 做轉場過過渡，輸出後效果卻完全消失，只好把效果都拉掉，自己手動調整 Opacity，做出相同效果。
第四雷：錯誤訊息告知遺失字體
Missing character from exported characters list:
奇怪，明明輸出的其他影片也有用到相同的字體，為何只有其中一個 json 有出現此 Error ？想了想，或許是因為此影片的 Text Layer 有使用 Slider Control 加函數控制做動態文字。
解法：先把有特效的 Text Layer，Pre-Compose 打包起來….
不要讓 Bodymovin 直接 Render 到這些有參函數動畫的圖層，就成功了！
之前也有用 AE 做動畫轉 Lottie 成功放在網頁上，以為流程應該大同小異，但是這次的動畫元件不再是只有簡單的向量圖，有圖有影片有文字還有比較多特效，然而每一個動畫都遇到不同的雷，前前後後也花了不少時間摸索解決方法，還好最後都有研究出解法，完美呈現！
辛辛苦苦做的動畫，每一偵每一秒都藏著作者的細節，若未能 100% 呈現，那真是每個設計師的痛。
還是覺得 Airbnb 的大大們開發 Lottie 這神器真是造福全世界的設計師，慈善開發後還要天天在 Github 回覆設計師一堆輸出問題 (然後設計師每天都在敲碗許願開發人員發威神力，讓 Lottie 可以支援更多 XD )，也是辛苦他們了！
Review
當初沒有考慮到轉檔輸出時會碰到的問題，直接開始製作動畫，做完才發現不支援某些的效果或功能。建議要製作動畫前的設計師們都可以先看一下 Lottie支援 AE 的功能有哪些，再開始製作，不會像我前面花費時間做完動畫，而因為檔案限制的關係，後期又多花時間再調整動畫，最後才成功輸出使用。
動畫完成後也可直接上傳 Lottie Preview，確定一下動畫在網頁上呈現沒問題後再給工程師，降低實作出現錯誤的可能。
希望大家嘔心瀝血的動畫都能在產品上完美呈現，有雷再見面~
Lottie Support Features: http://airbnb.io/lottie/#/supported-features
Basic Audio/Video support on GitHub:
https://github.com/airbnb/lottie-web/pull/465
