开篇废话

PAG是由腾讯推出的一套完整的动效工作流解决方案，目标是降低或消除动效相关的研发成本，能够一键将设计师在AE中制作的动效内容导出成素材文件，并快速上线应用于几乎所有的主流平台。
PAG有付费版本，可以支持更多功能，免费的社区版本基本可以满足我们的日常使用。
PAG官网

PAG工作流程

pag工作流程图

PAG动效工作流主要包含三个部分：

1. 导出插件PAG Exporter
2. 桌面预览工具PAGViewer
3. 跨平台渲染SDK

设计师通过AE插件PAG Exporter导出PAG动效文件，在桌面端通过PAGViewer预览效果和查看性能，确认无误再交付终端，终端接入PAG SDK，加载PAG文件完成对动效的渲染展示。
设计师在制作动效时需要注意的点——PAG 素材优化指南

PAG的优势

PAG相比其它动效解决方案有着非常多的优势：

1. 文件体积小，相比lottie更小，动效越复杂，对比效果越明显
2. 可以随意替换动效中的文字以及图片（比如天气温度变化，晴天变雨天等）
3. AE大多数特性都可以支持，比如图层、蒙板、混合模式、图形形状、变换、路径、矢量图等
4. PAG还支持视频剪辑，作为贴纸、字幕、特效、转场动效使用（付费版）
5. 社区版完全开源免费，采用 Apache 2.0 协议，可以自由商用
6. 支持lottie一键迁移——Lottie 迁移指南
7. Android aar 4.18M，iOS 全功能的也不超过4M
8. 等

PAG的实现方案

pag文件格式规范
个人根据官方文档，对PAG实现的一些猜想：

1. PAG是纯GPU渲染方案
2. PAG采用类似AE图层的形式导出，所以可以任意替换文字和图片
3. PAG的图层分形状图层，图片图层等，lottie动效可能导出全部图片，而PAG会根据AE设计师导出相对应的形状图层，形状图层类似我们代码画形状，必然比png图片要小得多
4. PAG导出图片图层时，可能采用的类似webp的编码方式，webp有损压缩基于VP8中的预测编码来压缩图像数据，而png是哈夫曼编码，webp更有优势
5. PAG文件还有更多的优化，详见pag文件格式规范

PAG的SDK导入

PAG移动端接入指南

基本要求：

• 支持android 4.4及以上系统
• 推荐使用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 {
    //基础版本，如需保持最新版本，可以使用 latest.release 指代
    implementation 'com.tencent.tav:libpag:latest.release'
}

3. 注意：需要在混淆列表里面，添加 libpag 的 keep 规则：

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

PAG的API使用

PAG SDk中有PAGView和PAGImageView——PAGView和PAGImageView对比
结论是推荐使用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进行封装

在针对多语言场景，我们在使用时，需要自己在业务代码中处理多语言文案，也许我们可以通过封装一层，不需要业务层去写相对应替换方法，让基类帮我们把这事给干了，也就是把使用PAG给规范起来。

构思

1. PAG文件由设计师导出，命名以pag_开头
2. 我们将PAG文件放到assets://pag/目录下
3. PAG文件内要替换为多语言的文案以[PAG文件名]_开头
4. PAG所用到的多语言文案统一放到pag_strings里
5. PAG里展示的文案不是实际文案，而是我们Android用到的资源ID
6. 封装PAGImageView，查找文案并对文案通过资源ID找到相对应的资源

例如：
动效文件名称：pag_run.pag
动效中的文字以及对应关系：

开始撸

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找到相对应的资源
                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 目前已经支持 Android、iOS、macOS、Windows、Linux、Web 和微信小程序等平台。 桌面预览工具 PAGViewer 和 AE 导出插件同时支持 macOS 和 Windows 平台。可以说是解决了我们在开发过程中很多问题。

更多内容戳这里（整理好的各种文集）