【分享】如何使用Lottie 將完美動畫100%呈現在產品上
設計師絕對是種感性多於理性的動物，往往在某些應用程式中看到可愛動畫就會興奮不已。工作上，依照使用者的情境設計出了流暢的動畫，想跟工程師一起執行並且完成時，有時會因為時間或是資源的限制，讓這種偏Emotional的設計優先順序往後調整，難免會有多種不捨以及感慨(設計師的內心小劇場會開演)。
自從Airbnb開發出Lottie後，讓設計師可以運用After Effects軟體製作出動畫，透過簡單的轉檔，能讓工程師將JSON檔放入程式中，把動畫100%的呈現在你的產品上。
為什麼要用Lottie?
- 如果你是Designer，恭喜你！現在你可以放心做動畫了，透過簡易的轉檔，可將動畫100%的呈現，真是太好了。
- 如果你是Engineer，恭喜你！以往可能需要大量撰寫程式碼才能刻出順暢的動畫，你會發現使用Lottie後比以前省力多了，而且檔案一點也不肥。
- 如果你是Product Manager，恭喜你！你的產品有更人性化的使用經驗，讓試用者開心之餘，也不用擔心開發時間資源不足的問題。
因為它是一套完整的Library，設計師從After Effects作出動畫以後，可以使用Bodymovin的擴充功能輸出JSON格式，可運用在iOS, Android, and React Native library之上，說了那麼多，讓我們直接跟著以下三步驟開始吧！
記得在開始前使用Lottie以前，你需要有：
(1) 動畫製作軟體 Adobe After Effects
(2) After Effects 的擴充功能 Bodymovin
步驟1 . 安裝 Bodymovin 擴充程式
After Effects plugin for exporting animations to svg/canvas/html + JS
首先你會透過這個Github連結進入到下載頁面，官方有很多條路給你選擇(我只列出兩種，剩下比較艱深的可以自行到Github去看)：
方法1
透過Adobe官網 : https://creative.adobe.com/addons/products/12557
但要注意你的After Effects 的版本需要是CC 2014 以及之上的版本，我是使用這一個方式安裝的。
方法 2
官網第一推薦是從這裡下載: http://aescripts.com/bodymovin/。不過裡面不但需要註冊帳號還需要填入信用卡資訊等等，所以不一定要選這方式。
步驟2 . 輸出成JSON檔案
接著開始製作動畫，動畫製作完成後，選擇你想輸出的Composition，從Windows > Extensions > Bodymovin點擊，按下Render的按鈕，輸出時間大約在3–5秒(依你動畫的複雜度)。
因為現在已經支援Image Support，如果你的檔案裡不是用純向量繪製的話，系統會自動幫你建出一個圖庫資料夾，有個需要注意的地方，輸出的Setting可以依照原始檔案名稱，這邊自己命名好對工程師來說比較方便喔！
3 . 輸出後進行預覽，確認效果是正確的
為了避免進行開發後，如果有想調整的視覺元件，需要再重新匯入一次的狀況發生，以下提供兩種方法：
(1)直接透過Bodymovin : 當輸出成JSON檔案後，你可以透過Bodymovin做預覽動畫，只要點擊 Current Renders(預覽剛剛輸出的) 或是 Browse(從資料夾中選取)，就可以逐格的看一下動畫是否有完全呈現，有些不支援的效果就會顯示不出來，稍後會說明一下使用上的限制。
(2)下載Lottie for Android : 若是手邊有Android，記得到Google Play進行下載，打開程式後可以讀取你的JSON檔案，可以再給工程師以前再做一次把關，確保你的動畫都沒問題以後即可送出！
使用上的限制
這是個方便的應用程式，但當然也會有一些使用上的限制，像是After Effects內的特效何其多，基本上目前支援的都是屬於比較基本的(但我覺得已經夠用)，若你想要一些物理特效(狂暴下雪打雷)都在產品中出現，可能要再等等Lottie升級或是拜託一下工程師和你一起完成偉大的作品吧！我下面列出目前只支援的動畫效果，完整的請看這裡：
Pre-composition / Keyframe Interpolation / Solids / Masks / Track Mattes / Parenting / Shape Layers / Stroke (shape layer) / Fill (shape layer) / Trim Paths (shape layer)
我還記得年初剛開始試用的時候，一切都要是向量檔(shape layer)，設計師不能在熟悉的繪圖軟體繪製真的有點痛苦，加上當初無法使用Pre-compostion也是很不方便，我現在寫文章的當下這些都已經支援Image Support以及多種效果了，所以請安心服用。
如何套用：
Android : https://github.com/airbnb/lottie-android
iOS: https://github.com/airbnb/lottie-ios
React Native: https://github.com/airbnb/lottie-react-native
只要照著文件中的步驟，即可完成設定，但因為我是設計師，我負責幫大家找相關資料!
Android目前還沒找到相關文章(有的話歡迎留言告訴我，我再補上)。
有個好網站推薦給大家： Lottiefiles，如果你身邊沒有設計師但還是好奇想要嘗試新東西的話，可以從這邊下載檔案試試看喔！
使用心得：
目前自己使用了3個月以上，也都與工程師合作，套用在iOS系統以及Android上，整體來說滿意度蠻高的。在以前，有些動畫需要做成GIF(若複雜一點可能檔案很大)，現在只要一個JSON檔案(約15KB)，就可以做到一樣的效果，不但大大幫產品減肥，還可以很順暢的播放動畫，大家可以試用看看喔！另外如果對此篇有什麼需要改進或是修改的，歡迎指教，單純是想紀錄這一陣子的使用心得(其實自己也怕以後忘記)，若有幫助到需要的大家就最好不過了。
謝謝你的觀看，如果喜歡也別忘了給予掌聲，你的每一個掌聲都是我持續寫作分享的動力：）
你好，我是Patty，在 UI/UX已有6年以上相關經驗，目前任職於Yahoo! Mobile Design Team擔任Product Designer，我是個外向、勇於挑戰並且喜歡嘗試新事物的設計師，工作之餘不但是個旅遊部落客也是流浪動物協會的義工，如果想要交流任何事，歡迎寄信給我 pattydraw@gmail.com ：） 英文書法也是我的興趣之一喔～ https://www.instagram.com/pattyhandmade/
