D8 — 抱歉我不是動畫師，是工程師
讓我們看看如何使用 Lottie 輕鬆實現 After Effect 的動畫效果吧。
🔥 隕石小故事
在開發中，常常會碰到一些動畫需求，希望吸引使用者的目光。但是，有時候會被要求實現一些超炫（無理？）的動畫效果 🤯。如果要實現它，可能需要一段超長的時間或者根本無法實現。這時候，如果有方法可以把動畫設計師的動畫直接套用在畫面上，那就什麼動畫效果都能實現了。 （絕對不是把動畫設計師抓來打。）
Overview
自己自幹一個動畫是冗長又麻煩的過程，還好現在我們有 Airbnb 所開發的 Lottie，我們可以透過將這個第三方程式庫安裝到專案中，輕鬆地實現設計師所繪畫的動畫效果，並且在 iOS、Android 和 Web 都能使用。接著就讓我們看看如何在專案中實現動畫效果吧！
實作 Lottie 動畫
Lottie 動畫如何輸出的？
- 設計師使用 After Effects 製作動畫
- 接著透過 Bodymovin 功能輸出 JSON 格式的動畫
- 工程師使用 Lottie 程式庫來讀取這個 JSON 格式的動畫
因為我們不是設計師，因此我們不需要下載 AE 跟 Bodymovin，那我們該去哪邊找尋 Lottie 可以讀取的 JSON 格式的動畫呢？
我把 Lottie 動畫都放在這裡了，自己去找吧 🏴☠️ Lottie Files
找到喜歡的檔案後，記得用導入 lottie-ios 第三方程式庫，就讓我們開始實作吧！
實作動畫效果
記得把剛剛所下載的 json 檔案放到專案中：
接著我們新增一個 View 到畫面中間，並且設置其 Custom Class 為 AnimationView，並且 Module 選擇 Lottie。
如果這邊沒設置 Module，運行時會出現錯誤或是 Crush。 之前踩到這坑，之後到 lottie-ios 的 Github issues 看到其他人的解決方式。 https://github.com/airbnb/lottie-ios/issues/826
接著我們設定他的 Animation Name：
接著我們這個 View 拖曳到程式碼中設定一個 IBOutlet，並且其類型為 AnimationView，接著我們在 viewDidLoad 讓這個 animationView 播放動畫：
讓我們運行看看畫面吧：
當然我們也能夠調整他的播放速度以及循環方式：
再讓我們運行一次看看吧：
當然我們也能透過程式碼的方式來設置動畫，我們只需要給 AnimationView.animation 一個 Animation 即可：
Summary
看到這張圖後，知道下次碰到超麻煩的動畫需求該怎麼辦了吧 😎
透過這次教學，希望大家知道如何麻煩設計師幫你畫個動畫學會使用 Lottie 來製作動畫效果，透過 Lottie 來讀取 AE 製作的 JSON 格式動畫。如此一來，就能輕鬆將設計師的動畫效果完整呈現在畫面上。
