PAG动效落地方案

这篇会介绍PAG动效落地方案

首先我们看下动效输出常用的几种方案的使用痛点

svg动画（.xml）

矢量图形动画 文件体积小

部分常用属性不支持，比如圆角，遮罩，导致有时候会需要通过塌陷形状路径，或者手k动画去达到想要的效果，输出工作量大；有时候还需要去修改xml文件代码，还原设计效果；

（具体可参考我的另一篇文章《SVG动画(.xml)资源输出常见问题》）

Lottie（.json）

矢量图形位图均支持

但不支持插件特效等复杂动画

序列帧(.png)

文件数量多，体积大

有时候需要通过降低帧率，压缩图片体积来满足体积要求；大部分场景无法支持这么大体量的动画方案

视频（.mp4）

文件体积不像序列帧那么大，但也不算小；

不支持alpha通道

PAG

解决目前输出方案的部分痛点

导出涵盖全部AE动画效果

在性能内存等方面优于其他输出方案

接下来将会从PAG是什么，怎么选择使用哪种输出方案，怎么使用PAG三个维度分享

image.png

是什么

1. PAG工作流程

image.png

跟目前使用的几种输出方式类似，动效设计完成后，通过PAG提供的AE导出插件PAGExporter，导出一个pag二进制文件，通过官方提供的桌面预览工具PAGViewer，检查动画是否有问题，如没有问题，直接输出给开发即可，开发通过接入PAG的sdk直接渲染该文件

2. PAG特有能力

image.png
图层编辑能力｜主要用于视频模版，固定的动画和尺寸，需要替换不同的图片资源或文字的情况

支持全部AE特性｜由于矢量导出仅支持部分常用的动画属性效果，为了满足更多更复杂的动画效果，引入了bmp渲染能力，以支持全部AE特性

3. PAG渲染方式

image.png

01 矢量预合成导出
这个矢量导出，并不仅指我们认知的矢量图形，使用位图做的属性动画，只要是矢量导出支持的AE特性，这部分导出方式称为矢量导出方式；

文件体积小,性能优于BPM导出

支持图层编辑能力

仅支持部分AE特性

image.png image.png image.png

详细可参见PAG官网
https://pag.art/docs/ae-support.html

02 BMP预合成导出

BMP导出方式，通俗解释就是序列帧合成；其原理是将AE特效渲染成图片序列帧，进而导出成视频；一个BMP预合成就相当于一个视频

支持所有AE动画效果

性能和内存相比矢量导出方式更大

不支持图层编辑能力

03 矢量和BMP混合导出

部分不支持的效果通过标记成BMP预合成导出，其余支持的效果正常矢量导出

支持AE全特性

图层编辑能力

image.png

总结下三种渲染方式的优劣势

image.png

OK 上面我们介绍了在设计师层面能做的事情 下面我们再了解下开发层面能控制什么

这里协同了开发同事做了三轮测试

image.png

01 对资源本身的控制

支持代码动态修改PAG文件矢量图形的相关属性

矢量文字｜支持-颜色，透明度，描边粗细；

矢量图形｜不支持，没法像SVG那样，去识别到每个矢量元素的属性

但确实有修改矢量图形动画颜色的需求，官方也提供了另一种取巧办法：

设计上-建一个纯色图层，把矢量图形的动画效果遮罩去擦出这个纯色图层

开发上-通过纯色图层颜色接口（PAGSolidLayer.color）来修改纯色图层的颜色

image.png

给PAG动画设置基础属性

View动画支持的属性都可以；如平移, 缩放, 旋转, 透明度

支持设置无限循环或者固定次数

是否支持倒放？

没有倒放接口，但可以自由控制PAG播放进度；针对BMP预合成的PAG文件不建议倒放，会有性能问题；更好的方案是设计师这边来输出一个倒放后的素材

image.png

02 对播放进度的控制

支持只播放PAG文件的某个区间或者调整播放速度

03 对资源添加额外的属性

是否可以对pag文件做属性动画？
比如一边播放PAG动画，一边通过代码做平移/缩放等属性动画

结论：可行

是否可以将PAG的播放进度、速度与其他参数绑定？

比如滑动一个控件，往前滑，动画往前播，往后滑，动画往回播；

结论：可行，可以逐帧控制动画，向前运动则播放进度-1，向后进度+1

上面我们了解了PAG是什么 支持什么能力 那当我们实际工作中应该如何选择呢 什么情况使用哪种动效输出方案？

下面总结了下PAG的优势和劣势

**PAG优势

内存性能功耗方面有一定的优势

image.png

PAG劣势

image.png

PAG方案SDK体积大，这个可能会是系统模块接入使用PAG会考虑的点，不过如果模块使用了比如多个PAG动画，算起来PAG带来的文件体积减量和SDK体积增量加起来，更小性能更优的话，那引入PAG还是比较有优势的；

了解了这么多，我们在实际工作中应该怎么选择使用哪种格式输出?

以下为个人总结 仅供参考，可以从四个方面去判断

1. 开发是否能接入PAG

2. 设计层面 判断哪种格式能满足动效需求

3. 开发层面 对输出效果是否有特殊需求

4. 性能方面哪种更具优势

   
   image.png

输出建议

矢量导出

1. 建议优先使用矢量图形设计，尽可能不使用图片素材；

因为图片素材用的太多，可能会出现内存泄漏情况；图片素材占用内存相比矢量图片要大，且矢量图形是可以无损放大的，在不同分辨率上可以使用同一套资源；

BMP预合成导出

尽量不用：通常只有在矢量导出效果无法满足时，才使用BMP预合成
尽量少用：如果有多个图层和预合成需要使用BMP预合成，尽量将它们合并，以减少BMP预合成的数目
控制面积：尽可能避免巨大面积的预合成标记为 BMP 预合成导出，只拆解必要的动画区域出来标记为 BMP 预合成导出。

尽量减少图层数量

如果存在内容完全相同的图层，应该避免直接复制图层，而是将这些图层做成预合成，然后引用预合成的方式，这样图层数量会只计算一份。

如果使用的是位图素材，尽量把可以合并的图层合并成一个位图素材

图层（Layler）越多，绘制需要的计算量也越复杂

原文地址 https://zhuanlan.zhihu.com/p/601273786