移動端跨平臺動效工具Lottie, PAG的使用

動效工具Lottie

 

Lottie 是 Airbnb 開源的一套跨平臺的完整的動畫效果解決方案，設計師可以使用 Adobe After Effects 設計出漂亮的動畫之後，使用 Lottic 提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式，就可以直接運用在 iOS、Android、Web 和 React Native之上，無需其他額外操作。

從網絡請求加載動畫： Lottie 的一個優點是可以從網絡請求加載動畫。所以，應該將網絡請求的響應內容轉換爲字符串格式。

Lottie 核心類

LottieAnimationView：繼承自 AppCompatImageView，是加載 Lottie 動畫的默認和最簡單的方式。

LottieDrawable：具有大多數與 LottieAnimationView 相同的 API，因此可以在任何視圖上使用它。

使用方法

func buildLOTAnimationView(_ resourceUrl: String) throws -> LOTAnimationView {
    //網絡下載
    let lotView = try LOTAnimationView(contentsOf: URL(string: ""))
    //本地加載
    let zipPath = MyCache.cacheDataPath(for: resourceUrl)
    let lotView = try LOTAnimationView.animation(withFilePath: "\(zipPath!)/data.json", error: ())
    lotView.frame = UIScreen.main.bounds
    lotView.contentMode = .scaleAspectFill
    lotView.loopAnimation = true
    lotView.play()
    return lotView
}

動效工具PAG

PAG（Portable Animated Graphics）是騰訊自主研發的一套完整的動畫工作流解決方案，助力於將 AE 動畫方便快捷的應用於各平臺終端。和 Lottie、SVGA 相比，支持的 AE 特性更多，支持的平臺更廣（增加了 mac OS、Windows 和 Linux），性能方面也做了深層次的優化，支持圖層編輯，可以與視頻編輯場景緊密結合

文件格式方面

Lottie 導出素材格式是 json 文本，可讀性高，但是承載 AE 特性能力差，文件體積大，解碼速度慢。SVGA 使用 ProtoBuffer 序列化，解碼速度快，最終生成的文件直接使用 zip 壓縮。PAG 採用二進制的編碼方法，配套自研編解碼器，動態比特位壓縮，冗餘信息極少，文件體積最小，解碼速度最快，且支持圖片和音頻信息編碼。

平臺端支持方面

目前 Lottie 僅支持 Android、iOS、web、mac OS，SVGA 支持 Android、iOS 和 web 端，PAG 可以支持到 Android、iOS、web、mac OS、windows、Linux，涵蓋到所有平臺。

使用方法

//1.讀取PAG素材文件， pagPath爲pag動畫的模版文件
pagFile = PAGFile.load(pagPath)

//2.替換模版資源
private func replacePag(image: UIImage, index: Int) {
    let pagImage = PAGImage.fromCGImage(image.cgImage)
    pagImage?.setScaleMode(PAGScaleModeZoom)
    pagFile?.replaceImage(Int32(index), data: pagImage)
}
private func replacePag(text: String, index: Int) {
    let pagText = pagFile?.getTextData(Int32(index))
    pagText?.text = text
    pagFile?.replaceText(Int32(index), data: pagText)
}

//3.創建PAG播放視圖PAGView
self.pagView = PAGView.init(frame: self.view.bounds)
if let pagView = self.pagView {
    //關聯PAGView和PAGFile
    pagView.setComposition(self.pagFile)
    pagView.setRepeatCount(0)
    pagView.setMaxFrameRate(30)
    pagView.setCacheScale(0.8)
}

 

參考文章：

https://juejin.cn/post/6844903661760413704

https://github.com/Tencent/libpag/blob/main/README.zh_CN.md

https://cloud.tencent.com/developer/inventory/25439/article/1935722