设计提效 | 动效如何完美落地？

众所周知，现在是卷王的天下。在 UI 设计中，3D 图层效果的使用会让整个界面视觉更加灵动，遇到最大的困扰就是做的 3D 效果在用 Lottie 或者 SVGA 导出时常常出现效果丢失、性能过载等问题无法稳定上线。

是时候尝试新的动效落地方案 PAG 了，PAG 能帮助设计师一键将动效素材部署到各个平台，今天小编带大家一起体验一下。

一、PAG 动效初体验

官网有详细的安装指南与使用文档，在此不过多赘述，建议大家在正式使用前仔细研读一下。

成功安装后就可以直接在 AE 中导出 PAG 文件，在目前最新的 4.2 版本的介绍中提到 PAG 可完美支持 3D 图层效果的直接导出，并且导出 PAG 后占位图层还支持被替换。 下面用一个简单的模板案例展示下：

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

常用 Lottie 和 SVGA 的朋友们应该知道，这两个格式都是不支持这一特性的。

二、PAG 动效，好在哪？

在我看来对于设计师来说，动效方案本身的学习、使用难度，以及 AE 效果的支持程度是大家最关心的问题。而 PAG 动效在这些方面做得很好，大大降低了动效设计师使用 PAG 的准入门槛。那么在简单体验了 3D 特性以及模板的占位图替换功能后，我们详细看看 PAG 具体还有什么优势：

1、 完善的工具链

PAG 动效功能的强大还体现在完善的工具链上，设计师们可以在 AE 插件和 PAGViewer 中进行多项设置和修改，极大程度地方便动效输出工作。相对传统研发还原的方式，PAG 方案显著提升了动效素材上线的效率：设计师设计完成后可以直接输出动画文件，研发不需要再参与代码还原，只需要接入一次SDK即可做到素材自助上线，也避免了反复进行效果确认的联调时间成本，并且还能够批量化生产素材，从流程上直接取代传统小工作坊形式，利用工业化生产方式大幅提升设计和研发效率。

1） 详尽的插件面板

PAG 的 AE 插件面板主要为导出面板和设置面板，设计师在设计动画的过程中，可以通过设置快捷键唤起导出面板。导出面板会呈现不支持的特性提示（提供设计建议和问题定位功能），是否导出音频，预览效果，以及打开设置面板等功能。 设置面板中，设计师们还可以查看 BMP/替换/文本图层信息、一键设置 BMP 图层、进行时间伸缩等操作，对于设计师修改、导出 PAG 文件提供极大的便利。

2） 运行时可编辑

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

3） 性能检测

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

2、 全AE效果支持

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

1） 矢量导出

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

另外，PAG4.2新特性还支持了3D功能和色相/饱和度、亮度/对比度：

以前文的素材为例，PAG 支持 3D 功能之后，素材翻转的特效就不再像以前需要通过边角定位、修改矢量形变等方式进行制作，极大地提高设计师工作的便利。 而色相/饱和度、亮度/对比度这两项特性通常运用在图片、视频模板中，以实现部分滤镜效果。

2） BMP预合成导出

对于不支持的 AE 特性或 AE 插件生成的视觉效果可通过 BMP 预合成的方式将图层转成序列帧，在合成的层面将渲染结果截取成图片，然后进行视频编码。这也能解决视频不支持透明通道而动画需要包含透明通道的问题。

3） BMP+矢量混合导出

可以理解为结合了上面提到的两种方式导出，既支持 AE 所有特性，又保证了运行时的可编辑性。

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

在文件大小方面，PAG 动效也比其他方案有更优的表现，以下分别用一个矢量动效和序列帧动效和其他动效方案做对比，可以直观地看出 PAG 动效的优势。 PAG 和 Lottie 都能很好地支持该矢量动效，我拿 @Vitalii Krymtsev 这位设计师的作品为例，导出对比了一下，Lottie 文件大小为 188KB，PAG 文件仅为 19.7KB，差距足有 9.5 倍。

序列帧动画方面，以 1300*1300、8f 的表情包为例，由于图像尺寸较大，输出的 apng 文件为 2.5MB，而 PAG 只需要 84KB，PAG 动效优势非常明显。

在没有文本图层时，PAG 动效可以做到单文件交付（当存在文本图层，为确保跨设备使用字体不发生变化，输出 PAG 会附带字体包文件）。

三、市面主流方案对比

从业这几年里也对市面上的一些主流动效落地方案，都有过多多少少的了解和使用心得，例如 Lottie、Ang/Webp 和 SVGA 等，下面跟大家简单聊聊这些方案的优劣势：

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

Apng 和 webp 都属于序列帧动画，因此可以支持包括 3D 在内所有的 AE 特性，但缺点也非常明显，当效果复杂和帧率较高时，文件大小和内存消耗就会相应激增。SVGA 记录时间轴中每个帧包括位移、缩放、旋转、透明度等方面动效表示，播放器再将这类信息还原到画板上，因此也可以输出序列帧动画（3D 图层转为序列帧后也能显示），兼顾了Lottie 和 Apng 的优点，但支持的 AE 特性是这些动效方案里最少的。

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

总的来说，不同的动效格式都有不同的缺陷和限制，不仅对设计师们的技能要求进一步提高，更加重了设计师的工作负担——了解不同的动效方案本身就是学习成本，更别提安装各类插件、调试不同方案的动效表现所耗费的无意义劳动。

四、探索 PAG 的更多面

UI 动效

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

直播礼物

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

在浏览PAG动效官网时，还发现截止至2023年1月，已有 500+ 企业或产品接入了PAG SDK，其中不乏微信、QQ、小红书、知乎等互联网头部 app，PAG 动效的成熟技术得到各大产品的验证。期待 PAG 的持续优化和更新，实现更多的功能，以满足不同场景的动效需求。