作为一名“失踪人口”，上次发帖还是在18年的时候，还没缓过神，这几年就过去了。仔细想想，这几年的工作内容包罗万象：视频模板音兔、3D礼物动画、虚拟角色avatar、游戏宣传PV、NFT等，也算是经历了项目的摧残，熬成了一名老设计。引用一句经典的话语，“拥抱变化”，我想一名成熟的设计，无疑得是能在多种项目中摸爬，练就一身武艺。

      在之前的项目中，作为一名多媒体设计，无法避免的得和开发打交道的，那么经典三件套：GIF/序列帧/lottie也都有在各种项目中运用，关于三者的优劣特色，网络上好文数不胜数，就不赘述了，这次主要是想分享今年项目引入的新技术，也是本文重点讲解的工具：【PAG】

项目背景

      《全民k歌》是国内的一款主打唱歌的移动端软件，近几年也在拥抱视频化进程，推出了歌词海报、视频动画等短视频模板功能。

在之前的模板制作过程中，我们一直遵循“古法工艺”：

      这就导致了繁琐的制作流程，反反复复的还原检查，以及和开发永远也掰头不完的一句话：你这动画曲线还原的不行啊！也有同学会在这说使用CSS动画曲线即可，但客户端受到各种因素制约，算法工程师无法直接调用，只能手搓代码去尽可能还原动画标注，但终究是很难完美实现，所以现在K歌上的歌词模板，只是设计和开发妥协的产物。

      除了动画曲线外，最终资源包还会受到文件体积限制：图片清晰度、循环帧长度、转场数量、贴图叠加图层等需要考虑的因素。这些负面影响，都在不断的为最终输出减分。因此我们一直在寻求新技术来解决这些痛点，直到看到腾讯发布的全新动画方案—PAG!

主流动画格式对比

从设计侧主要应用功能来讲，lottie和PAG能满足常规需求，其中PAG比较吸引我的功能主要3点：

1. 1.特效图片自动合成并能输出

我们以常见的粒子为例，当制作完成后，我们尝试导出

      可以发现无论是导出json或是svga的时候，这些插件对于AE特效效果无能为力，而AE之所以强大，也是体现在其丰富的扩展插件上，如果因为无法导出这些效果而放弃使用，实在是可惜。而且这些效果的缺失，也会使得画面呈现效果大打折扣。

      如果输出PNG序列帧，再用序列帧一帧一帧的摆放到时间轨，也能用json等导出，但是为何不直接导出序列即可呢？而且万一是个几百帧的序列文件，光是摆上时间轴的工作，也是相当折磨人的。

      反观PAG这边，只需要对合成名字添加【_bmp】后缀，输出的时候即可自动转码，全自动输出，省时省力。

重要的是：支持插件效果的输出！支持插件效果的输出！支持插件效果的输出！

1. 2.强大的压缩性能

      我们接着上面的粒子案例讲述。

      当效果完成后，落地是非常重要的过程。无法落地的动效，那只能成为飞机稿。

      上述的粒子烟花，导出序列接近7兆，即使用第三方软件压缩，也只能控制在2兆左右

      而我们用PAG去输出，只有580K

      对接过开发的同学应该都知道，开发对于文件体积的限制那可谓是做到了极致。从设计的角度而言，我们可能更关注效果，而过大的文件体积，会导致更高的性能划线，许多低端机型也许只能用降级方案，常见的就是高端机展示动画，低端机展示静帧。对于用户而言，效果的缺失自然而然也谈不上多好的用户体验。

2兆的序列帧对比580K的pag，优异的压缩性能，能照顾到更多的低端机用户。

上述的粒子是位图，PAG已经展现了优秀的压缩效率，当我们以矢量效果制作的时候，pag依然领先。

1. 3.完善的自检工具

我们依然以小球动画为例

SVGA和lottie只能预览，无法性能评估

      而PAG的输出文件，双击预览，即可调用专用播放器，能很直观的展示持续时间、帧速率、宽高、显存性能等。

      设计和开发互相看不对眼，因素之一就在于开发吐槽设计性能消耗太大，砍掉了做好的动画。虽说很多项目在开始前会让开发介入做性能评估，但是对于能否落地，以及是否真的是因为性能消耗太大无法上线，对于设计而言都是黑盒。

      而PAG完善的自检工具，对于性能的消耗一目了然，后续只需要拟定好性能消耗划线，那么设计也能更好的根据划线去制作动画。

案例展示

下面我结合具体的模板案例，来展示一下PAG的动画优势

我们先去PAG官网下载插件：https://pag.io

选择对应的平台版本，我这边选择了MAC插件，当安装完成后，从应用程序启动PAG Viewer

点击左上角即可安装AE插件

      在AE的具体制作过程中，将固定不变的素材内容装入一个合成即可，我们并不需要更改自己的制作习惯，PAG插件在人性化上是非常值得称赞的，基本没有学习成本。

当安装上最新版的PAG插件后，选用panel导出方式

      在弹出的菜单中，我们可以把使用了插件的合成层，勾选bmp，PAG插件就会自动执行转换，把AE第三方插件效果，转换为可导出的内容，这样就做到了svga和lottie做不到的事。

下面画框内的安子代表用户素材，可替换任意图片或者视频

      音轨部分，我们和开发的沟通，因为在模板制作中，音轨文件是固定的，所以我们只需要把音效叠加在背景音乐音轨上即可，将整条音频对齐第1帧，即可让音画同步。

      整个制作流程，因为PAG能自动将特效图层转化，无需导出序列帧制作伪lottie，所以对设计师而言能省事不少，同样对于粒子、烟火等效果，也能通过_bmp标签带出，使得画面内容更加丰富。

      有空的同学可以看看pag.io/docs/install.html，里面有详细的安装过程、规范信息等，方便和开发对齐后续流程。

效率对比

在引入了PAG后，我们的制作流程也从古法工艺，进化到了现代工艺，最明显的就是效率的提升

旧制作流程：

视觉定稿+设计demo+设计改稿=2天

开发文档=1天

开发还原+调试+正式发包=2-3天

所有工期加起来，也是按周为单位去计算的了，对于分分秒秒都有大事件的互联网来说，这个工期实在是太慢

新制作流程：

视觉定稿+设计demo+设计改稿=2天    即可直接发布PAG包上线

并且最主要的是开发的效果只能近似，而PAG的动画能完美还原~

在引入PAG后，K歌的模板产出能力，从6天提升到了2天，效率翻了3翻（卷起来了~）

互联网行业，时间就是生命，热点都跟不上，怎么卷赢竞品？高效的产出，能更好的结合时事热点，制作出新颖的设计，为公司产品带来持久的活力。

总结

      对于动效设计来说，甚至对于所有设计来说，工具只是实现效果的一个途径，但是好的工具，事半功倍。PAG的出现，给了动效设计一个新的选择，而我们也不再局限于只能制作矢量动画，声光、烟雾、粒子、火花等等的效果，都将使我们的设计产出，更加精彩。有了PAG，动效设计将拥有无限可能。

      最后附上PAG官方的QQ交流群，各位同学如果对PAG有使用交流或者功能建议，欢迎加群探讨。让我们一起把PAG打磨的更加强大，让更多用户感受动效之美。

愿各位新年虎虎生威，2022，不负年华

Powered by Froala Editor