PAG动效落地方案
这篇会介绍PAG动效落地方案
首先我们看下动效输出常用的几种方案的使用痛点
svg动画（.xml）
矢量图形动画 文件体积小
部分常用属性不支持，比如圆角，遮罩，导致有时候会需要通过塌陷形状路径，或者手k动画去达到想要的效果，输出工作量大；有时候还需要去修改xml文件代码，还原设计效果；
（具体可参考我的另一篇文章《SVG动画(.xml)资源输出常见问题》）
Lottie（.json）
矢量图形位图均支持
但不支持插件特效等复杂动画
序列帧(.png)
文件数量多，体积大
有时候需要通过降低帧率，压缩图片体积来满足体积要求；大部分场景无法支持这么大体量的动画方案
视频（.mp4）
文件体积不像序列帧那么大，但也不算小；
不支持alpha通道
PAG
解决目前输出方案的部分痛点
导出涵盖全部AE动画效果
在性能内存等方面优于其他输出方案
接下来将会从PAG是什么，怎么选择使用哪种输出方案，怎么使用PAG三个维度分享
一、是什么
1. PAG工作流程
跟目前使用的几种输出方式类似，动效设计完成后，通过PAG提供的AE导出插件PAGExporter，导出一个pag二进制文件，通过官方提供的桌面预览工具PAGViewer，检查动画是否有问题，如没有问题，直接输出给开发即可，开发通过接入PAG的sdk直接渲染该文件。
2. PAG特有能力
图层编辑能力｜主要用于视频模版，固定的动画和尺寸，需要替换不同的图片资源或文字的情况
支持全部AE特性｜由于矢量导出仅支持部分常用的动画属性效果，为了满足更多更复杂的动画效果，引入了bmp渲染能力，以支持全部AE特性
3. PAG渲染方式
01 矢量预合成导出
这个矢量导出，并不仅指我们认知的矢量图形，使用位图做的属性动画，只要是矢量导出支持的AE特性，这部分导出方式称为矢量导出方式；
文件体积小,性能优于BPM导出
支持图层编辑能力
仅支持部分AE特性
详细可参见PAG官网
02 BMP预合成导出
BMP导出方式，通俗解释就是序列帧合成；其原理是将AE特效渲染成图片序列帧，进而导出成视频；一个BMP预合成就相当于一个视频
支持所有AE动画效果
性能和内存相比矢量导出方式更大
不支持图层编辑能力
03 矢量和BMP混合导出
部分不支持的效果通过标记成BMP预合成导出，其余支持的效果正常矢量导出
支持AE全特性
图层编辑能力
总结下三种渲染方式的优劣势
OK 上面我们介绍了在设计师层面能做的事情 下面我们再了解下开发层面能控制什么
这里协同了开发同事做了三轮测试
01 对资源本身的控制
支持代码动态修改PAG文件矢量图形的相关属性
矢量文字｜支持-颜色，透明度，描边粗细；
矢量图形｜不支持，没法像SVG那样，去识别到每个矢量元素的属性
但确实有修改矢量图形动画颜色的需求，官方也提供了另一种取巧办法：
设计上-建一个纯色图层，把矢量图形的动画效果遮罩去擦出这个纯色图层
开发上-通过纯色图层颜色接口（PAGSolidLayer.color）来修改纯色图层的颜色
给PAG动画设置基础属性
View动画支持的属性都可以；如平移, 缩放, 旋转, 透明度
支持设置无限循环或者固定次数
是否支持倒放？
没有倒放接口，但可以自由控制PAG播放进度；针对BMP预合成的PAG文件不建议倒放，会有性能问题；更好的方案是设计师这边来输出一个倒放后的素材
02 对播放进度的控制
支持只播放PAG文件的某个区间或者调整播放速度
03 对资源添加额外的属性
是否可以对pag文件做属性动画？
比如一边播放PAG动画，一边通过代码做平移/缩放等属性动画
结论：可行
是否可以将PAG的播放进度、速度与其他参数绑定？
比如滑动一个控件，往前滑，动画往前播，往后滑，动画往回播；
结论：可行，可以逐帧控制动画，向前运动则播放进度-1，向后进度+1。
上面我们了解了PAG是什么 支持什么能力 那当我们实际工作中应该如何选择呢 什么情况使用哪种动效输出方案？
下面总结了下PAG的优势和劣势
PAG优势
内存性能功耗方面有一定的优势
PAG劣势
PAG方案SDK体积大，这个可能会是系统模块接入使用PAG会考虑的点，不过如果模块使用了比如多个PAG动画，算起来PAG带来的文件体积减量和SDK体积增量加起来，更小性能更优的话，那引入PAG还是比较有优势的；
了解了这么多，我们在实际工作中应该怎么选择使用哪种格式输出?
以下为个人总结 仅供参考，可以从四个方面去判断
1. 开发是否能接入PAG
2. 设计层面 判断哪种格式能满足动效需求
3. 开发层面 对输出效果是否有特殊需求
4. 性能方面哪种更具优势
输出建议
矢量导出
1. 建议优先使用矢量图形设计，尽可能不使用图片素材；
因为图片素材用的太多，可能会出现内存泄漏情况；图片素材占用内存相比矢量图片要大，且矢量图形是可以无损放大的，在不同分辨率上可以使用同一套资源；
BMP预合成导出
- 尽量不用：通常只有在矢量导出效果无法满足时，才使用BMP预合成
- 尽量少用：如果有多个图层和预合成需要使用BMP预合成，尽量将它们合并，以减少BMP预合成的数目
- 控制面积：尽可能避免巨大面积的预合成标记为 BMP 预合成导出，只拆解必要的动画区域出来标记为 BMP 预合成导出。
尽量减少图层数量
如果存在内容完全相同的图层，应该避免直接复制图层，而是将这些图层做成预合成，然后引用预合成的方式，这样图层数量会只计算一份。
如果使用的是位图素材，尽量把可以合并的图层合并成一个位图素材
图层（Layler）越多，绘制需要的计算量也越复杂。
介绍到这 如有补充或错误 感谢指正