動畫實作

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

Lottie初學者教學指南:如何在iOS App設計一個令人驚豔的動畫
Lottie初學者教學指南:如何在iOS App設計一個令人驚豔的動畫
In: 動畫實作, Swift 程式語言

如果能設計一個好的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 Sample Animation #1
Lottie Sample Animation #2
Lottie Sample Animation #3

Lottie 動畫檔

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

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

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

幸運的是,我們多了一個選擇:Lottie Files

Lottie Files

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

在Xcode使用Lottie

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

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

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

Creating a new Xcode project

使用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的分類中。

Lottie JSON file

建立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的物件。

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

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

lottie-sample-4

動畫循環撥放的方法

以初始設定而言,動畫只會撥一次,如果你想要一直循環這個動畫,你可以將一個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,你將會得到以下的結果,是不是很有趣呢?

lottie-sample-5

接下來?

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

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

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

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

譯者簡介:Oliver Chen-工程師,喜歡美麗的事物,所以也愛上Apple,目前在iOS程式設計上仍是新手,正研讀Swift與Sketch中。生活另一個身份是兩個孩子的爸,喜歡和孩子一起玩樂高,幻想著某天自己開發的App,可以讓孩子覺得老爸好棒!。聯絡方式:電郵[email protected]

原文A Beginning’s Guide to Lottie: Creating Amazing Animations in iOS Apps

作者
Simon Ng
軟體工程師,AppCoda 創辦人。著有《iOS 17 App 程式設計實戰心法》、《iOS 17 App程式設計進階攻略》以及《精通SwiftUI》。曾任職於HSBC, FedEx等跨國企業,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda業務,致力於iOS程式教學、產品設計及開發。你可以到推特與我聯絡。
評論
更多來自 AppCoda 中文版
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。