iOS Swift Lottie

Swift簡易Lottie動畫運用

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

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

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

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

 

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

 

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

 

 

 

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

 

 

我選擇了其中一個動畫。

 


 

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

 

 

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

 

 

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

 

 

ViewControllerimport 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)
        }
    }

 

看一下最後的結果。

這樣就完成了!

對於工程師來說,這樣的動畫呈現方式變得輕鬆多了,如果有興趣,不妨上Lottie官網實際製作看看吧。

 

相關連結參考:

https://appcoda.com.tw/lottie-beginner-guide/

林怡瑄