? 隕石小故事

在開發中，常常會碰到一些動畫需求，希望吸引使用者的目光。但是，有時候會被要求實現一些超炫（無理？）的動畫效果 ?。如果要實現它，可能需要一段超長的時間或者根本無法實現。這時候，如果有方法可以把動畫設計師的動畫直接套用在畫面上，那就什麼動畫效果都能實現了。
（絕對不是把動畫設計師抓來打。）

Overview

自己自幹一個動畫是冗長又麻煩的過程，還好現在我們有 Airbnb 所開發的 Lottie，我們可以透過將這個第三方程式庫安裝到專案中，輕鬆地實現設計師所繪畫的動畫效果，並且在 iOS、Android 和 Web 都能使用。接著就讓我們看看如何在專案中實現動畫效果吧！

實作 Lottie 動畫

Lottie 動畫如何輸出的？

1. 設計師使用 After Effects 製作動畫
2. 接著透過 Bodymovin 功能輸出 JSON 格式的動畫
3. 工程師使用 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 格式動畫。如此一來，就能輕鬆將設計師的動畫效果完整呈現在畫面上。