開篇廢話

PAG是由騰訊推出的一套完整的動效工作流解決方案，目標(biāo)是降低或消除動效相關(guān)的研發(fā)成本，能夠一鍵將設(shè)計師在AE中制作的動效內(nèi)容導(dǎo)出成素材文件，并快速上線應(yīng)用于幾乎所有的主流平臺。
PAG有付費版本，可以支持更多功能，免費的社區(qū)版本基本可以滿足我們的日常使用。
PAG官網(wǎng)

PAG工作流程

pag工作流程圖

PAG動效工作流主要包含三個部分：

1. 導(dǎo)出插件PAG Exporter
2. 桌面預(yù)覽工具PAGViewer
3. 跨平臺渲染SDK

設(shè)計師通過AE插件PAG Exporter導(dǎo)出PAG動效文件，在桌面端通過PAGViewer預(yù)覽效果和查看性能，確認(rèn)無誤再交付終端，終端接入PAG SDK，加載PAG文件完成對動效的渲染展示。
設(shè)計師在制作動效時需要注意的點——PAG 素材優(yōu)化指南

PAG的優(yōu)勢

PAG相比其它動效解決方案有著非常多的優(yōu)勢：

1. 文件體積小，相比lottie更小，動效越復(fù)雜，對比效果越明顯
2. 可以隨意替換動效中的文字以及圖片（比如天氣溫度變化，晴天變雨天等）
3. AE大多數(shù)特性都可以支持，比如圖層、蒙板、混合模式、圖形形狀、變換、路徑、矢量圖等
4. PAG還支持視頻剪輯，作為貼紙、字幕、特效、轉(zhuǎn)場動效使用（付費版）
5. 社區(qū)版完全開源免費，采用 Apache 2.0 協(xié)議，可以自由商用
6. 支持lottie一鍵遷移——Lottie 遷移指南
7. Android aar 4.18M，iOS 全功能的也不超過4M
8. 等

PAG的實現(xiàn)方案

pag文件格式規(guī)范
個人根據(jù)官方文檔，對PAG實現(xiàn)的一些猜想：

1. PAG是純GPU渲染方案
2. PAG采用類似AE圖層的形式導(dǎo)出，所以可以任意替換文字和圖片
3. PAG的圖層分形狀圖層，圖片圖層等，lottie動效可能導(dǎo)出全部圖片，而PAG會根據(jù)AE設(shè)計師導(dǎo)出相對應(yīng)的形狀圖層，形狀圖層類似我們代碼畫形狀，必然比png圖片要小得多
4. PAG導(dǎo)出圖片圖層時，可能采用的類似webp的編碼方式，webp有損壓縮基于VP8中的預(yù)測編碼來壓縮圖像數(shù)據(jù)，而png是哈夫曼編碼，webp更有優(yōu)勢
5. PAG文件還有更多的優(yōu)化，詳見pag文件格式規(guī)范

PAG的SDK導(dǎo)入

PAG移動端接入指南

基本要求：

• 支持android 4.4及以上系統(tǒng)
• 推薦使用gradle 3.0及以上版本編譯

1. 在 root 工程目錄下面修改 build.gradle 文件，增加mavenCentral()

buildscript {
 
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

2. 在 app 的 gradle 文件 app/build.gradle，添加 libpag 的庫依賴

dependencies {
    //基礎(chǔ)版本，如需保持最新版本，可以使用 latest.release 指代
    implementation 'com.tencent.tav:libpag:latest.release'
}

3. 注意：需要在混淆列表里面，添加 libpag 的 keep 規(guī)則：

-keep class org.libpag.** {*;}
-keep class androidx.exifinterface.** {*;}

PAG的API使用

PAG SDk中有PAGView和PAGImageView——PAGView和PAGImageView對比
結(jié)論是推薦使用PAGImageView。

1.在xml中添加PAGImageView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF"
    android:padding="24dp">

    <org.libpag.PAGImageView
        android:id="@+id/pag_view"
        android:layout_width="375dp"
        android:layout_height="225dp" />

</LinearLayout>

2.在Activity或Fragment中使用

viewBinding.apply {
    //這里填入圖片
    val pagFile = PAGFile.Load(assets, "pag_image.pag")
    pagFile.replaceText(0, pagFile.getTextData(0).apply {
        text = "替換文本0"
    })
    pagFile.replaceText(1, pagFile.getTextData(1).apply {
        text = "替換文本1"
    })
    pagView.composition = pagFile
    pagView.setRepeatCount(0)
    pagView.play()
}

對PAGImageView進(jìn)行封裝

在針對多語言場景，我們在使用時，需要自己在業(yè)務(wù)代碼中處理多語言文案，也許我們可以通過封裝一層，不需要業(yè)務(wù)層去寫相對應(yīng)替換方法，讓基類幫我們把這事給干了，也就是把使用PAG給規(guī)范起來。

構(gòu)思

1. PAG文件由設(shè)計師導(dǎo)出，命名以pag_開頭
2. 我們將PAG文件放到assets://pag/目錄下
3. PAG文件內(nèi)要替換為多語言的文案以[PAG文件名]_開頭
4. PAG所用到的多語言文案統(tǒng)一放到pag_strings里
5. PAG里展示的文案不是實際文案，而是我們Android用到的資源ID
6. 封裝PAGImageView，查找文案并對文案通過資源ID找到相對應(yīng)的資源

例如：
動效文件名稱：pag_run.pag
動效中的文字以及對應(yīng)關(guān)系：

開始擼

package com.glazero.android.view

import android.content.Context
import android.util.AttributeSet
import org.libpag.PAGComposition
import org.libpag.PAGFile
import org.libpag.PAGImageView

/**
 *  author : superc
 *  date : 2023/6/13 10:26
 *  description : https://pag.art/
 */
class SuperPAGImageView @JvmOverloads constructor (
    context: Context,
    attr: AttributeSet? = null,
    style: Int = 0
) : PAGImageView(context, attr, style) {

    override fun setPath(path: String): Boolean {
        return super.setPath(path)
    }

    override fun setPath(path: String, f: Float): Boolean {
        val composition = findPAGComposition(path)
        composition ?: return false
        setComposition(composition, f)
        return true
    }

    fun setPAGName(path: String): Boolean {
        return setPAGName(path, 30.0F)
    }

    fun setPAGName(path: String, f: Float): Boolean {
        val composition = findPAGComposition("assets://pag/$path")
        composition ?: return false
        setComposition(composition, f)
        return true
    }

    override fun setComposition(compostion: PAGComposition) {
        super.setComposition(compostion)
    }

    override fun setComposition(compostion: PAGComposition, f: Float) {
        if (compostion is PAGFile) {
            for (i in 0 until compostion.numTexts()) {
                //查找文案并對文案通過資源ID找到相對應(yīng)的資源
                compostion.replaceText(i, compostion.getTextData(i).apply {
                    val resId = context.resources.getIdentifier(text, "string", context.packageName)
                    text = context.getString(resId)
                })
            }
        }
        super.setComposition(compostion, f)
    }

    private fun findPAGComposition(path: String): PAGComposition? {
        return if (path.startsWith("assets://")) {
            PAGFile.Load(context.assets, path.substring(9))
        } else {
            PAGFile.Load(path)
        }
    }

}

PAG有誰在使用

騰訊系、京東系、迅雷系、虎牙系、知乎、小紅書、知乎、陌陌、豆瓣、bilibili、全民K歌、同程旅行、央視頻、小睡眠等

寫在最后

PAG 的渲染 SDK 目前已經(jīng)支持 Android、iOS、macOS、Windows、Linux、Web 和微信小程序等平臺。 桌面預(yù)覽工具 PAGViewer 和 AE 導(dǎo)出插件同時支持 macOS 和 Windows 平臺?？梢哉f是解決了我們在開發(fā)過程中很多問題。

更多內(nèi)容戳這里（整理好的各種文集）