D8 — 抱歉我不是動畫師,是工程師

讓我們看看如何使用 Lottie 輕鬆實現 After Effect 的動畫效果吧。

Jeremy Xue
Jeremy Xue ‘s Blog
4 min readSep 23, 2019

--

🔥 隕石小故事

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

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 格式動畫。如此一來,就能輕鬆將設計師的動畫效果完整呈現在畫面上。

--

--

Jeremy Xue
Jeremy Xue ‘s Blog

Hi, I’m Jeremy. [好想工作室 — iOS Developer]