Lottie初學者教學指南：如何在iOS App設計一個令人驚豔的動畫

如果能設計一個好的UI(User Interface)動畫可以讓一個App大幅增進UX使用者體驗(User Experience)，這通常就是能讓一個感覺普通的App搖身一變成為質感極佳的App，非常重要的關鍵因素。然而，設計與實現一個有意義與功能兼備的動畫是挺有難度的，尤其是，如果你需要的動畫或過場視覺效果是極為複雜的，若要實現這個需求，這將對一個iOS程式開發者是一個非常艱困的任務。

假想你並不是一個獨立開發者，你是身在一個有程式工程師與UI/UX設計師的分工團隊中，有多少次你曾得面對這樣的場景，設計師給你看了一個非常酷的動畫，並尋求你能一起把它完成，你心想著這個設計的確看起來很酷，但實在有夠難的，且需要耗費一段時間才能有機會實現它。

現在，有了Lottie，一個由Airbnb設計開發，能讓開發者能輕鬆地不需要寫著冗長的程式碼，就有機會實現想要的動畫功能。你將可以擷取Adobe After Effects的動畫資料，直接在你的Xcode專案使用它。這實在太棒了，可以節省下你大量的時間來實現完成動畫功能需求。

在本篇教學，我將告訴你(妳)一些重點：

• Lottie是什麼？
• 你可以從哪裡找得到Lottie 動畫檔案
• 如何在你的iOS專案使用Lottie

Lottie是什麼？

第一個問題是：Lottie是什麼？它是由Airbnb所發展的，Lottie是一套Library，可將After Effects動畫應用在iOS、MacOS、Android與React Native等的原生App上的函式庫(Library)。動畫可經由一個 名為Bodymovin的擴充功能輸出成一個JSON格式，Lottie再讀取這個JSON格式的動畫資料，且即時呈現動畫模式。

換句話說，請想像你從設計師拿到了一個JSON格式的檔案，你只要直接拉到Xcode專案內，接著讓Lottie來協助你讀取這個動畫資料，別以為這樣就結束了，你還是得寫一些程式碼，才能呈現這個動畫，但你會發現Lottie已經為你省下了大量撰寫程式碼才能呈現動畫的時間了。

Lottie現在是一個開源碼，並可從Github那兒下載，包含簡單的專案與一系列的範例動畫檔，我們來看一下幾組範例動畫能讓你可在iOS App使用。

Lottie 動畫檔

在使用Lottie之前，你必須了解的第一件事情就是需要一個具有JSON格式的動畫檔，如果你已經有了一個After Effects動畫，請使用名為Bodymovin的擴充功能，來建立JSON格式檔。

如果你從沒使用過After Effects？或是你要如何有一個動畫呢？

你可以雇用一個設計師來協助你建立一個動畫，或你開始學如何使用Affect Effects。

幸運的是，我們多了一個選擇：Lottie Files

Lottie File是一個收集許多高品質動畫並符合Lottie file格式的網站，它也是一個可讓設計師分享他們作品的地方，所有的檔案皆可免費下載，如果你像我一樣，沒有任何的After Effects的經驗，你將會十分驚豔這套Lottie函式庫所能帶給你的。

在Xcode使用Lottie

假設你有了一個動畫檔，下一步就是準備建立你的Xcode專案，然而就像其他iOS的函式庫一樣，最簡單匯入到Xcode專案的方式，就是使用CocoaPods。

那麼我們就來快速建一個Demo來了解如何使用Lottie。

第一步，在Xcode建立一個新專案，並使用single View Application的範本，將專案名稱命名為LottieDemo(或是你自行取名一個)，再來存檔。

使用CocoaPods來安裝Lottie函式庫

一旦你設定好專案後，請把Xcode關閉，然後打開Terminal，我們先建立一個Podfile準備來安裝Lottie函式庫。我是假設你對CocoaPods有些使用經驗，並將它安裝至你的Mac了。

依照下列指令輸入到Terminal的指令列內，來產生Podfile

pod init

然後打開Podfile，在Podfile內編輯

  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!
 
  # Pods for LottieDemo
  pod 'lottie-ios'
end

其實我們只是簡單地加入一行pod 'lottie-ios'放到Pod內，現在回到Terminal，再執行下列指令

pod install

然後CocoaPods會下載Lottie函式庫並將它連結到你的Xcode專案內，當此流程完成後，你的專案資料夾會有個名叫LottieDemo.xcworkspace，使用Xcode來打開此檔案，並開始編寫程式碼。

加入動畫JSON格式檔

如果你有自己設計的動畫檔要來測試是最佳的方式，但如果你沒有的話，請從lottiefiles.com的免費動畫 下載具有JSON格式的檔案，並安裝在本次的簡易快速demo專案中。

把你的JSON格式檔(名為：servishero_loading.json)置入你的Xcode專案導覽列中，將他放在LottieDemo的分類中。

建立LOTAnimationView

要開始進入有趣的階段了，你只需不到10行的程式碼就能夠實現這個動畫範例。

先打開ViewController.swift，接著寫入要匯入Lottie函式庫的程式碼：

import Lottie

再來，更新viewDidLoad內的方法如下：

override func viewDidLoad() {
    super.viewDidLoad()
    if let animationView = LOTAnimationView(name: "servishero_loading") {
    animationView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)
    animationView.center = self.view.center
    animationView.contentMode = .scaleAspectFill
    
    view.addSubview(animationView)

    animationView.play()
}

利用簡短的程式碼，你就可以實現一個動畫，我們來看一下上述程式碼的內容，Lottie內有個類別叫做LOTAnimationView，它是負責讀取一個具有JSON格式的動畫檔，為了能顯示這個動畫，你需將你剛下載具有JSON格式檔案，創立一個LOTAnimationView的物件。

LOTAnimationView是UIView的子類別，所以實現它的方式，就是像是實現其他的View的做法一樣，我們定義了它的外型尺寸、置中功能與content mode的設定為Aspect Fill，接著，我們再寫一個addSubview來將動畫子顯示層(SubView)，加入至主顯示層(MainView)。最後，我們呼叫LOTAnimationView內的play()方法來顯示動畫。

現在可以執行這個專案，來看看這個App的執行狀況，可以看到App啟動後不久，就立即呈現這個動畫了。

動畫循環撥放的方法

以初始設定而言，動畫只會撥一次，如果你想要一直循環這個動畫，你可以將一個loopAnimation的屬性設定為true，像是：

animationView.loopAnimation = true

當然，LOTAnimationView類別還可以提供一系列的屬性功能來建置你想的動畫模式，像若是你想要讓動畫慢速撥放，你可以輕鬆的改變animationSpeed這個屬性，可改成：

animationView.animationSpeed = 0.5

由遠端伺服器來讀取動畫的JSON格式檔

其實你並不一定需要把JSON格式檔放在本地端，你也可以將你的動畫檔放在遠端伺服器，Lottie已有提供這樣的API功能給開發者，可遠端讀取JSON格式檔。你可以試著修改原本的animationView的初始設定，然後來看一下你會得到怎樣的動畫呈現。

let animationView = LOTAnimationView(contentsOf: URL(string: "https://github.com/airbnb/lottie-ios/raw/master/Example/Assets/PinJump.json")!)

在Animation View加入轉換的功能

就像是UIView一樣，LOTAnimationView支援不同型態的轉換(Transform)，你可以向Transform這個屬性做相關設定，可對動畫做旋轉，改變尺寸大小與位置變動等。這裡來做個簡單示範，對動畫做旋轉45度的需求。

let rotateTransform = CGAffineTransform(rotationAngle: 45.0)
animationView.transform = rotateTransform

還有，你也可以應用UIView動畫功能來調整你的動畫，也像其他標準的UIView物件一樣，我們再建立一個可改變動畫尺寸大小的需求。新增的程式碼是寫在位於 viewDidLoad()的方法內。

override func viewDidLoad() {
    super.viewDidLoad()
    if let animationView = LOTAnimationView(name: "servishero_loading") {
    animationView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)
    animationView.center = self.view.center
    
    animationView.loopAnimation = true
    animationView.contentMode = .scaleAspectFill
    animationView.animationSpeed = 0.5
    
    // Applying UIView animation
    let minimizeTransform = CGAffineTransform(scaleX: 0.1, y: 0.1)
    animationView.transform = minimizeTransform
    UIView.animate(withDuration: 3.0, delay: 0.0, options: [.repeat, .autoreverse], animations: {
        animationView.transform = CGAffineTransform.identity
    }, completion: nil)
    
    view.addSubview(animationView)

    animationView.play()
}

最後執行這個App，你將會得到以下的結果，是不是很有趣呢？

接下來？

一個好的UI動畫可讓你的App提升一個檔次，並提供你的使用者與增加他們對你App的黏度，在還沒介紹Lottie時, 要實現一個從After Effects設計好的動畫，並具備可轉換效果的功能，是非常耗時與難以達成的。現在，有了一個這個強大的動畫函式庫，可讓我們不如此費力就能實現了。

在此篇教學中，你應該學會了如何在Xcode專案中使用Lottie，在這裡我只是簡單介紹了Lottie的基本功能，接下來，我們會在下一篇教學再分享Lottie其他令人驚豔的功能。

如何你喜歡這篇教學，請繼續關注，若有任何需要討論之處，也可留言給我或是分享給朋友。

你可以從Github下載LottieDemo教學範例 來參考這篇教學。