据报道，鱼蕨箫起源于凹非寺量子位|公众号QbitAI
收集一分钟的王者“击杀”制作一系列酷炫的动画，并集成到客户端的一键战报生成功能中，需要多长时间？
这样，拥有“开黑局”专用的迁移视频，英雄昵称KDA齐全。
当每个“高亮”操作出现时，可以增加文字的有效渲染效果。
此外，还可以在发生“三杀”等极限操作时，与英雄合作获得爆破场效果。
对于特效设计师和客户端开发者来说，从设计完成到研发恢复效果上线的时间本来应该在一周以上。
毕竟设计师不仅要在AE上完成特效设计，还要和研发人员反复确认代码的有效还原度。
遇到特效太复杂、动画文件太大等情况，必然会变成办公室的battle……
这种掉头发伤害感情的事，让程序员们坐了下来。
不，他们马上制作自动化工具，用它最快4小时就可以交付在线视频。
近日，腾讯PCG发行商中台开发的一款名为PAG(portableanimatedgraphics )的工具传出“即将开源”的消息，直接点燃了动画设计师和研发的圈子。
毕竟，官方邮箱里已经充满了来自外部的SDK申请和开源愿望。
所以，PAG到底是什么，能让研发和设计师们这么卖力吗？
什么是PAG？ 简而言之，PAG是一个完整的动画工作流。
在PAG出现之前，理想的移动动画制作过程如下。
设计师们首先在adobe after effects ( AE )中设计动画效果，导出动画效果文件( gif或视频Demo )交给研发人员，然后研发人员用代码恢复动画
但实际上，设计和研发“一周”工作流程如下：
双方battle的问题如下，但不限于此。
从研发的角度来看，设计提供的所有特效并不是手机都能实现的。
如果系统不支持特效的实现方式，即使它非常酷，用户也无法体验。 例如，如果无法实现无论是Android还是iOS的交互效果，研发可能会将其送回设计并“重塑”。
除了不能实现的特殊效果外，难以实现的特殊效果也在“重做”范围之内。 如果设计不在库中，或者日程安排不允许，则最后必须重新设计。
即使前两个需求得到满足，研发也要考虑性能的实现等问题，一旦实现后对性能要求过高，就会“低头”再回来。
从设计的角度来看，并不是研发提供的所有解决方案都可以接受。
如果精心制作的动画通过研发用其他方法“拼凑”，使效果看起来“低级”，就会脱离设计的初衷。
因此，设计需要反复研究开发和battle协商，最终确定折中方案。 即使在预览阶段，也不一定能拍摄动画效果。 如果暂时变更需求，研发就必须再做一次……
在这种情况下，PAG (可移植动画图形)作为一系列动画工作流“为世人所知”。
它包括三个部分： PAG导出插件( PAG Exporter )、桌面预览工具( PAGViewer )和渲染SDK，它们分别用于解决上述三个研发问题。
在PAG导出插件中，设计者首先在AE中创建动画，然后使用PAG导出插件直接将AE动画代码导出为. PAG格式的
该插件相当于从根本上解决了设计与研发之间的“重做”问题。 当设计文件包含系统不支持的AE向量的特性或对性能有明显影响的属性时，PAG导出插件会提供修改提示，以便设计人员可以导出满足系统要求的动画文件
细节也有容易使用的地方。 例如，您可以一键导出BMP预合成，并设置位图填充模式，从而进一步节省设计时间。
导出的. pag文件以二进制格式存储视频信息，不仅有效地减少了文件大小，而且设计师们可以在里面直接放入各种素材资源(图像、声音等)，交货时只发送一个文件。
文件格式长
使用桌面预览工具pagViewer，设计者在预览时，可以直接采用PAGViewer在PC端预览. PAG动画文件的效果。 这样，设计人员就可以一键预览移动端的动画效果，而无需等待动画文件联机。
您也可以直接在PAGViewer中修改可编辑的文本和位图。
PAG查看器不仅修改可编辑的文件和预览效果，而且还包括PAG动画的基本信息，例如，性能显示面板，包括时间长度、帧速率、大小、bmp预合成的数量、层的总数等
如下图所示，设计师可以直接通过面板查看量化性能指标，对. pag文件的性能进行定量评估，有针对性地进行优化，避免在线前发现“性能卡设计”等问题。
渲染SDK最后，开发人员只需一次渲染SDK访问即可加载PAG文件，并在Android、iOS、mac OS、windows、web、Linux等常见平台上准确还原动画效果
当然，pag文件的可编辑性使开发人员可以直接修改或替换文件中的文本，或占用位图，从而避免了设计过程中的麻烦，以满足您的需要。
部分动画效果可以分为“动画效果的内容”。 “可编辑性”是指替换“内容”部分。
例如，考虑“一系列滚动的文本”动画效果。 其中，文本信息是内容，滚动是动画效果。 pag可以在保留预设动画的情况下修改文本的内容、字体、大小、颜色等十几个属性。
除了可以修改和替换文本外，PAG还可以替换位图。 除了替换照片外，还可以直接将视频置入位图中，同时保留预设动画。
这样，不仅可以避免根据需要反复修改动画效果的设计带来的痛苦，还可以将动画效果应用于视频剪辑。
我们在开头看到的王者特殊效果，包括昵称和KDA在内，其实一键就可以替换，不需要重新设计对应的效果。
这次是情侣组合(狗头) )。
总而言之，PAG的最大好处是以下几点。
输出的动画文件非常小，与同类方案相比平均减少50%，并且支持导出所有AE效果，包括在运行第三方AE特效插件时保留动画效果。 实时文本替换提供了完整的工具链，从位图导出、预览到性能优化，并支持SDK覆盖所有平台。 这是目前短视频特效设计师最烦恼的问题，包括Web和服务器端呈现功能。
其实在PAG问世之前，业界就已经有了一些类似的设计插件，但或多或少都存在问题。
PAG是怎么解决它们的？
我们在PAG的研发团队腾讯PCG发布器中联系了台下编辑子工作组的负责人Dom，了解了背后的实现原理。
据PAG背后的技术专家Dom介绍，PAG初期最具挑战性的地方其实在于“视频文件设计”和“全AE特性支持”两个部分。 高效的动画文件
关于输出文件格式，现有的JSON等格式存在解码速度慢、压缩率低两大问题。
因此，团队重新设计了名为. pag的文件格式，采用二进制数据结构存储动画信息。
而二进制数据结构不需要进行字符串匹配、序列化等操作，解码速度比JSON等格式的文件快得多。 测试数据显示，在解码速度下，PAG格式的视频文件比JSON文件快12倍。
另一方面，二进制数据结构比JSON具有更高的压缩率。
Jon文件会导出许多冗馀信息，但二进制数据结构会跳过大量的缺省存储，并且可以使用动态位紧凑地存储。 因此，即使是相同的动画内容，PAG文件也比同种方案压缩文件小50%左右。
此外，采用二进制数据结构还具有以下优点：导出视频文件时，无需组合“图像包”(插件图像)，只需一个文件就可以了，而且包括音频在内都可以内置。
完整AE功能支持
讨论完文件格式后，我们来看看PAG文件是如何支持所有AE效果的。
此功能允许PAG文件实时预览复杂的效果，并确保动画的可编辑性，但以前无法同时实现。
这是因为传统的动画导出模式有两种：矢量导出和序列帧导出。
虽然可以编辑矢量导出的动画文件，但由于存在无法在移动设备上实时预览的复杂效果，因此存在无法完全支持AE功能的缺点。
序列帧的导出基于屏幕截图原理解决了这个问题。 也就是说，将所有复杂的视觉效果剪切到图像中以实现导出。 但是，其结果是，文件大小可能会达到几十到上百兆，对移动端来说“太大了，无法编辑”。
为了保证文件的编辑和出色的动态效果的实现，PAG的研发人员们想到了混合导出的方法。
简单来说，就是标记不需要可编辑性的图层。 这样，需要保持可编辑性的图层将导出为纯矢量，而标记的图层将导出为序列帧。
有趣的是，为了尽量压缩导出文件的大小，PAG团队还自行设计了bmp预合成格式，以充分利用视频的跨边界帧压缩能力，并在此基础上扩展对透明通道的支持
除了渲染优化外，最终视频序列帧格式的文件大小可以降低到传统图像序列帧的1.24%左右。
但是，从基础功能的实现，到现在已经成为完整的工具流程，PAG并不是“一蹴而就”的。
与此相对，SDK从去年开始向公众开放，但2016年写入了PAG的第一行代码。
从最初的版本1.0到现在的形态，PAG已经经过了四个版本。
“battle上的产品”“从编写第一行代码到第一次起跑，队伍花了六个月。”
对于为什么选择继续打磨这种工具产品，Dom提到了“回忆杀”这个词Flash。
在Flash时代，动态开发有非常完美的工作流程。 设计人员可以创建动画并导出SWF文件，然后直接导入和使用它，而无需开发人员手动敲击代码恢复效果。 效果中的细节可以调整。 但是，现在的H5、移动APP开发中，很少有工具能够完全恢复这个完美的动画工作流。
他希望PAG能够在视频编辑这样的场景下，将该工作流带入移动端的视频制作中，降低或消除视频相关的研发成本。
这个想法在市场上也很快有了案例研究——
在PAG项目开始的同一年，出现了支持将矢量动画导出到每个平台的AE插件Lottie。 该插件的成功证明，恢复从Flash设计到研发的流畅工作流是“成功的”。
和PAG团队一样，Lottie背后的开发人员也有同样深厚的Flash经验，但Lottie主要是为UI动画设计的，不太适合短视频场景。
为了适应短视频贴纸视频和模板的开发需求，PAG团队选择继续自己的研究。
六个月后，PAG版本1.0出来了。
腾讯的设计师们试用后，PAG团队得到的反馈是“存在很多问题”，核心概括如下。
1.0版支持带动画的文本编辑，但仅包含AE的纯向量导出能力，无法完全恢复许多复杂的动画效果。
为此，PAG继续迭代2.0版，实现了混合导出对AE全特性的支持，同时解决了特效和可编辑性问题。 开发团队在2.0版中引入了占据位图的能力，为照片模板和视频模板的生产带来了工业化批量生产的能力。
到了3.0版，PAG在可编辑性方面进一步探索突破，增强了层级原子编辑组合能力，支持从原子特效组件构建动态模板，很好地支撑了游戏战报、一键电影等动态模板的需求
此时，PAG的功能已经比较全面，腾讯内部设计师开始“口碑传播”，积极将PAG推荐给外部其他设计师使用，从而反馈了更多的需求。
本月，PAG完成了4.0版的开发，发出了开源信号。 这个版本花了将近一年的时间完成了渲染架构的大幅升级，完全脱离了谷歌的Skia 2D图形库，SDK外壳也直接减少了60%。
具体来说，PAG团队通过自主研发实现了一组轻量纯粹的GPU绘图引擎，最大限度地利用了平台方面提供的所有能力，用500K左右的软件包覆盖了Skia的大部分功能，在界面设计上实现了现代的GPU无因此，在包裹体减少的同时，实际上进一步提高了渲染性能的上限。
此外，PAG 4.0版本基于这一新的2D绘制引擎，还将正式扩大对Web端的支持。
量子还获悉，目前PAG 4.0版已经完成了腾讯的开源审查流程。
回过头来看，PAG的演进其实也得益于腾讯内部复杂的商业需求。 凭借开发团队和业务方的持续“battle”，这一动画工作流始终与设计师、工程师们最真实的“痛点”紧密相连。
所以，明明是腾讯的内部工具，在外部却因为用户的口碑而出名，向开放、开源发展。
说了这么多，是时候附上传送门了。
如果你对PAG感兴趣，现在就可以去官网获取SDK。
开源代码也在路上，可以一起蹲下~
官方网站： https://pag.io/
—完—量子位QbitAI 头条签约关注我们，第一时间了解前沿科技动态
