PAG动效简介

---

前言

互联网产品动效使用越来越多，不管是播间里面的各种礼物道具动效，还是APP各种场景要展示的动画，为了实现理想的效果，反复打磨，都是困扰设计师和开发工程师的一个主要问题。设计要求：加载要快，显示要清晰，体积要小，可扩展性要强，开发要面对：内存占用，CPU占用，屏幕适配等等，互相撕扯…

一、PAG是什么？

定义：PAG（Portable Animated Graphics）是腾讯自主研发的一套完整的动画工作流解决方案，助力于将 AE 动画方便快捷的应用于各平台终端。

特点

1. 文件更小
   PAG采用针对 AE 时间轴属性设计的二进制文件编码器，能够使用动态比特位紧凑存储，冗余信息极少，文件体积最小，解码速度最快，且支持单文件集成图片和音频等外部资源。

2. 全AE支持
   在纯矢量的导出模式下，无论是哪种实现方案，在众多的 AE 特性面前，都只支持将有限的 AE特性导出渲染，PAG 方案提供了 BMP 预合成的解决方案，支持将特定图层截图导出成透明视频，实现了对于所有 AE 特性导出的支持。

3. 跨平台一致的渲染架构
   相对于 Lottie 、SVGA 依赖于平台端相关的渲染接口，PAG 使用了跨平台一致的 C++ 架构，平台层面仅仅提供渲染环境，渲染的主体位于 C++ 层，可以实现跨平台的渲染一致性。

4. 支持运行时编辑
   PAG 不仅仅支持文本图层的文本编辑、图片图层的占位图替换，还支持图层级别的增加、删除及更改渲染位置，实现原子素材的自由组合，典型的应用场景就是视频模版和游戏战报，一个模版中由多个 pag 有机组合在一起。

5. 支持的平台更多
   PAG 可支持 Android、iOS、Web、macOS、Windows、Linux 和微信小程序，基本上可以说是全平台覆盖了。

6. 设计师的福音
   提供AE多功能插件：PAG Exporter
   提供桌面预览工具：PAGViewer

二、PAG使用流程图

三、PAG动效集成

环境搭建

• 添加依赖

	api 'com.tencent.tav:libpag:latest.release'

• 添加混淆

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

代码实现

一个简单的全屏动效展示功能

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <org.libpag.PAGImageView
        android:id="@+id/pag_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

 		mPagImageView = findViewById(R.id.pag_view);
        PAGFile pagFile = PAGFile.Load(getAssets(), "pag path");
        mPagImageView.setComposition(pagFile);
        mPagImageView.setRepeatCount(0);
        mPagImageView.play();

三、动效踩过的坑

1. 视频
   需要音频和动画的结合；需要维护一套视频播放器；文件比较大
2. gif动图
   锯齿化严重；画面比较模糊（只支持8位颜色）；动态图画帧率较低；不能处理复杂动画；文件比较大
3. 帧动画
   加载慢；多帧加载效果差；多帧图片占内存

实际使用pag动效之后，文件比较小，加载速度快；Profiler中实测，CPU、内存、电量占用比帧动画提升很多

四、相关资源

• 官方网站
• 开源项目

五、参考链接

• https://www.jianshu.com/p/cc91ef9235ec
• https://zhuanlan.zhihu.com/p/620979024
• Android PAG动效的使用
• 腾讯PAG动效工具解析