iOS Swift Lottie

Swift簡易Lottie動畫運用

林怡瑄 2020/12/24 15:01:41

4 3009

在製作APP時，如果想要一些令人為之一亮的特效，加入動畫是個好選擇。實現動畫的方式有很多種，做成GIF檔是其中一種選擇，只是可能會面臨到檔案大小與下載速度的問題（如果需要較複雜的動畫的話）。或者，可以與設計師配合使用Lottie製作動畫，也能有流暢的動態表現。

Lottie是一套Library，由Airbnb開發，可將Adobe After Effects製作的動畫透過Bodymovin擴充功能轉成JSON格式，再由Lottie讀取後呈現在畫面上。

遺憾的是，我並沒有設計師能幫我製作動畫，所以我決定使用LottieFiles上面的分享來實作這個功能，並加上一點點的應用。

首先，我們先建立一個專案，並使用CocoaPods來安裝Lottie，這邊就不再另贅述CocoaPods的安裝方式了。

接著我們開啟副檔名為xcworkspace的新檔案。

這樣準備工作就完成了！接著我們到LottieFiles去找個適合的動畫。年底將至，幾乎變成全世界的節日的聖誕節也要來臨了，所以我們就來找一個聖誕節相關的動畫吧。

我選擇了其中一個動畫。

題外話，LottieFiles有APP可以使用，可以從上方的QR Code掃描讀取。

預覽可以調播放速度，以及選擇背景顏色等等，接著點擊Download。

這邊有多種格式，也可以下載GIF和MP4檔案，不過我們今天要介紹的是Lottie，所以就下載JSON格式，並將下載好的檔案拉進我們的主資料夾裡。

在ViewController裡import Lottie，並加入簡單的幾行程式。

import UIKit
import Lottie

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let animationView = AnimationView(name: "26940-boost-xmas-animation")
        animationView.frame = CGRect(x: 0, y: 0, width: 350, height: 350)
        animationView.center = self.view.center
        animationView.contentMode = .scaleAspectFill
        animationView.loopMode = .loop
        
        view.addSubview(animationView)
        animationView.play()
    }
}

設定動畫位置、大小、重複播放等，這樣就完成了，很簡單吧。

實際運用上，可以使用在loading畫面等等的轉場讓視覺效果更加豐富。這邊就簡單加入一個按鈕，製造播放與暫停的效果。

我使用一個Bool值變數紀錄點擊狀態。

var play: Bool = true

然後加入按鈕，設置點擊時將按鈕換成暫停的圖示並播放動畫，再按一下會改為播放圖示以及暫停動畫。

    @IBAction func playButton(_ sender: Any) {
        play = !play
        if play {
            animationView.play()
            self.clickButton.setImage(UIImage(named: "baseline_pause_circle_outline_black_18dp"), for: .normal)
        } else {
            animationView.pause()
            self.clickButton.setImage(UIImage(named: "baseline_play_circle_outline_black_18dp"), for: .normal)
        }
    }

看一下最後的結果。