小伙伴们好，之前分享过一篇 UI 落地的 7 种格式的文章《玩转动效｜AE 常用动效落地必备指南》，介绍了一些 AE 常用动效落地格式。评论区里有小伙伴提到想要了解腾讯 PAG 的格式，今天就给大家安排上

之后还会多多分享新的插件或者使用心得使这个指南更完整，更好地帮助到每一个受动效上线困扰的设计师们，请大家持续关注～

一、PAG 简介及案例展示

PAG（Portable Animated Graphics）是腾讯自主研发的一套完整的动画工作流解决方案，致力于将 AE 动画一键导出并快捷地应用于各平台和终端。和业界常用的动画工作流解决方案相比，PAG 支持全部的 AE 特性导出，覆盖的平台更广（目前 PAG SDK 已完成覆盖 iOS、Android、macOS、Windows、Linux、Web 和微信小程序等常用平台），性能方面也做了深层次的优化，Lottie 和 SVGA 的设计目标是解决 UI 动效场景，PAG 的诞生的原因是因为 Lottie 无法满足视频编辑场景里的动效需求，后续又兼顾了 UI 动效在内的各种场景。截止目前有 600+ 企业或产品接入了 PAG SDK，其中不乏微信、QQ、小红书、知乎等互联网头部 app，是一个很成熟的产品。

由于 PAG 动效可以同时支持矢量动效和序列帧输出，设计师可以在 UI 动效的设计中运用 PAG，比如图标动效、开屏动效/视频、banner 动效、悬浮动效等等。

话不多说，我们直接通过一个 UI 动效的设计案例来了解下PAG 的强大功能：

这个 banner 轮播图是 UI 动效设计中的常见形式，整个展示页面中 3D 效果的加入令人眼前一亮，不仅提升了界面的美观度还可以大幅增加展示产品的曝光。但对设计师来说，制作出美观的 banner 并不难，最难的是如何保证作品不在上线的过程中丢失效果。最新版本的 PAG 就完美解决了这一难题。

1、完美支持全部 AE 特性的导出

PAG 同时支持“矢量预合成”导出和“BMP 预合成”导出两种方式，两者对应矢量动画和序列帧动画的导出。

在矢量导出方面，无论是 Lottie 还是 SVGA，所支持的 AE 特性仅仅是 AE 众多特性中的很少的一部分，这在一定程度上限制了设计师的创造力。针对这个问题，PAG 的 BMP预合成导出方式，支持导出所有 AE 特性，适用于不可编辑的场景。

这个 banner 图就是采用了矢量的导出方式，目前 PAG 4.2 版本的矢量导出中可完美支持 3D 图层效果的直接导出。之后，素材做翻转特效不再像以前需要通过边角定位、修改矢量形变等方式，极大地提高设计师工作的便利。下面简单介绍下这几个导出方式的特点：

1）矢量导出

导出的 PAG 文件极小，性能会优于 BMP 预合成，但仅支持部分 AE 特性。矢量预合成导出通常用于 UI 动画等对于文件大小和性能敏感，以及需要素材内容可编辑的场合。如果有不支持的能力，PAG 的导出面板也会在导出时提示设计师。

另外，PAG 4.2 新特性还支持了色相/饱和度、亮度/对比度，这两项特性通常运用在图片、视频模板中，以实现部分滤镜效果。

2）BMP预合成导出

对于不支持的 AE 特性或是由 Particular、AtomX 等第三方 AE 插件生成的视觉效果，PAG 动效可通过 BMP 预合成的方式，将对应图层转成序列帧，在合成的层面将渲染结果截取成图片，然后进行视频编码。

而针对视频不支持透明通道而动画需要包含透明通道的问题，在编码的层面扩展了透明通道的支持。

最终达到视觉效果一致的动效输出，这是 Lottie 一类的矢量动效无法比拟的功能。

3）BMP+矢量混合导出

PAG 同时也支持结合以上两种特性的导出方式，从而实现在支持 AE 所有特性的同时又保持运行时的可编辑性。

2、完善的工具链

PAG 动效功能的强大还体现在完善的工具链上，设计师们可以在 AE 插件和 PAGViewer 中进行多项设置和修改，极大程度地方便动效输出工作。

1）运行时可编辑

PAGViewer 运行时可编辑，支持修改文本和替换占位图，设计师在本地填充素材预览，无需等到上线后才能确认真实的效果。

2）详尽的插件面板

PAG 的 AE 插件面板主要为导出面板和设置面板，设计师在设计动画的过程中，可以通过设置快捷键唤起导出面板。导出面板会呈现不支持的特性提示（提供设计建议和问题定位功能），是否导出音频，预览效果，以及打开设置面板等功能。

设置面板中，设计师们还可以查看BMP/替换/文本图层信息、一键设置BMP图层、进行时间伸缩等操作，对于设计师修改、导出PAG文件提供极大的便利。

3）性能检测

PAG在桌面预览工具 PAGViewer 上增加了性能检测的功能，可以让设计师很方便地看到PAG文件的基本信息，还有量化的性能指标，定量地评估该文件的性能，以可视化的方式感知素材性能状态，方便设计师进行针对性的优化，而不需要依赖研发上线测试性能状态，极大减少了素材优化的返工耗时。

3、文件极小，支持单文件交付

在文件大小方面，PAG 动效比其他方案有更优的表现。

PAG 和 apng 都能很好地支持该banner滚动动效，但 apng 文件大小在压缩后为2.2MB，PAG文件仅为203KB，差距不止10倍。PAG 在支持替换占位图层的同时，文件大小相比 apng 还有非常大的优势。

而对比 Lottie，PAG 也优势明显。

将banner滚动动效（因Lottie不支持3D特性，已将文件进行修改）分别以 Lottie、PAG 格式导出，Lottie 文件共 3.4MB，PAG 文件仅为 208KB。

在没有文本图层时，PAG 动效可以做到单文件交付（当存在文本图层，为确保跨设备使用字体不发生变化，输出 PAG 会附带字体包文件）。一个.pag 文件就囊括了背景音乐、占位替换图层、动效信息等多方面内容，相比 Lottie 输出附带 json、image 文件夹等多个文件内容，PAG 动效的单文件交付简化了输出形式，减少出错概率。

二、更多使用场景

除了 UI 动效的导出上线外，PAG 还在直播礼物、图片视频模板、游戏战报、H5 动效等场景中有亮眼的表现。

直播礼物

直播平台由于实时网络通讯要求高，集成功能越来越多和用户设备参差不齐等多种原因，对各种特效性能要求就变得更为苛刻，PAG 动效具有先天优势，将 PAG 运用到直播礼物，优化用户体验。

图片/视频模板

PAG 动效支持将内置的图片作为占位图替换，并保留所有动画效果。因此可以将整个 PAG 文件设计成一个模板，把预设的占位图替换成用户选取的照片或视频，自动套用效果生成视频。全程可以让设计师自由批量生产模板，无需研发介入。

三、接入及安装

PAG 不仅有以上的优势，安装与接入也极为简单。

1、设计安装

step1.官网提供 PAGViewer 双端安装

step2.Windows系统的小伙伴双击安装包根据引导提示安装即可，Mac用户将app 拖拽至Applications应用程序文件夹即安装成功，如下图所示：

step3.提示安装/更新 AE 插件

step4.在 AE 导出一栏即可看见 PAG 输出模块

step5.有中文提示的导出面板

step6.生成后点击“查看“可调出 PAGViewer 预览

2、研发接入

研发只需接入 PAG SDK 后简单操作即可完成动效的上线部署，官网和 GitHub 也有贴心又详细的接入介绍指南。

3、软件更新

已接入 PAG SDK 的会出现更新提示弹窗，根据提示点击“安装更新”即可。也可以在菜单栏中找到‘’检查更新‘’更新体验最新版本，建议及时安装更新以获得更好的体验。

四、主流动效落地方案对比

在之前的文章中有详细介绍过 AE中常用的 7 种动效落地格式（SVGA、json、Apng、WebP、PNG序列、Gif 、MP4）及优缺点解读，大家感兴趣可以去看那篇文章。

在此以大家最常用的 Lottie、SVGA 格式与 PAG 进行对比 ：

Lottie

Lottie 的动画本质是矢量动效（图层可以是矢量或位图），即通过导出的 json 代码描述运动，优点在于可以制作高帧率动画且文件大小很小，但对于AE特性的支持比较少，并且要求设计师具备矢量绘图的能力，另外，Lottie 的 3D 功能是完全缺失的。

SVGA

SVGA 记录时间轴中每个帧包括位移、缩放、旋转、透明度等方面动效表示，播放器再将这类信息还原到画板上，因此也可以输出序列帧动画（3D 图层转为序列帧后也能显示），兼顾了 Lottie 和 Apng 的优点，但支持的 AE 特性是这些动效方案里最少的。

PAG

PAG 同时支持“矢量预合成”导出和“BMP 预合成”导出两种方式，两者对应矢量动画和序列帧动画的导出。针对这个问题，PAG 的 BMP 预合成导出方式，支持导出所有 AE 特性，适用于不可编辑的场景。但过多使用 BMP 导出，会导致最终的 PAG 文件性能消耗过大，因此，在设计过程中，尽量使用 PAG 已经支持的 AE 特性来达到设计效果，而不是首选将合成以 BMP 形式导出。

总的来说，PAG 的能力还是蛮全面的，平台支持方面可以涵盖到所有常用的平台，能力方面基本上可以覆盖到所有的应用场景。

最后顺便附上 PAG 相关的资源，大家感兴趣可以进一步了解：

官网：https://pag.art/

所有的软件和插件我已经打包好了，点击下方链接获取即可

AE动效PAG格式落地软件+插件 下载链接：https://pan.baidu.com/e/19dTVaq95SjKsSvFCGh-CKQ

提取码：PAG6

Powered by Froala Editor