日期：
来源：腾讯设计族收集编辑：腾讯 PAG
“随着腾讯PAG在市场上受到广泛认可，Adobe 在官方网站上发布了这一成功案例，介绍了PAG是如何与 AE 联动提升动效上线交付效率，并向大家展示PAG的诞生背景、方案特性、主要支持的业务场景以及PAG未来发展的方向，让动效设计师更好的解决业务中遇到的交付问题。”在互联网，越来越多的产品将动态效果（以下简称动效）作为与用户交互的媒介：不论是短视频中用户用于拍摄的趣味贴纸，还是直播中观众表达对主播喜爱和支持的“大火箭”礼物，又或是游戏中酷炫的视觉效果，动效都发挥着重要的作用。而对于动效设计师来说，动效上线的品质尤为重要，因为往往只有好用的交互或精美的视觉动画，才有可能吸引或留住用户。Adobe Creative Cloud 是设计师首选的创意应用软件，旗下After Effects（以下简称AE）具备强大的创作功能和广泛的用户基础。依托Adobe广泛的协作生态，After Effects拥有丰富的插件及特效功能，能够充分满足动效设计师的创作需要。After Effects简单易学，拥有丰富的动画预设，更新后的23.0版本更是新增超过50种新动画预设，非常适合现代的设计工作流程，能够进一步帮助设计师快速创建动画，用更多时间聚焦创意，从而创作出更好的特效效果。不过，虽然设计师们能够使用AE完成动效设计，但是在做完精美的动效素材后，仍然会遇到上线交付过程中的效率瓶颈。近几年，业界也诞生了很多的动效工作流解决方案，在一定程度上解决了这个上线交付过程的瓶颈，但它们依旧存在不能完整导出AE的特性、动效性能难以保证、配套工具支持有限的问题。设计师在业务中做完动效素材后，还是经常牺牲设计保发版、保性能，从而降低了视觉及交互品质。为此，腾讯开发了Portable Animated Graphics（以下简称PAG）动效工作流解决方案。它提供从AE导出插件，到桌面预览工具PAGViewer，再到各端的跨平台渲染SDK。能够一键将设计师在AE中制作的动效内容导出成素材文件，并快速上线应用于几乎所有的主流平台。可以广泛应用于UI动画、贴纸动画、视频编辑、模板设计等场景。相比其他同类型方案，PAG目前具有显著的技术优势。随着腾讯PAG在市场上受到广泛认可，Adobe 在官方网站上发布了这一成功案例，介绍了PAG是如何与 AE 联动提升动效上线交付效率，并向大家展示PAG的诞生背景、方案特性、主要支持的业务场景以及PAG未来发展的方向，让动效设计师更好的解决业务中遇到的交付问题。同时，Adobe Live 也邀请到PAG 的骨灰级粉丝徐萌萌（保时捷数字科技有限公司设计负责人）与PAG的开发人员，共同开展PAG 的实操使用教学直播，携手帮助设计师走出动效上线效率低的困境，获得了 AE 设计师们的支持和认可。下面就一起来了解下对于设计师在交付中遇到的痛点，PAG都提供了哪些非常完善的功能支持：首先，在 AE 特性支持方面，相对于市面上的其他动效方案，PAG 支持的 AE 特性更多。除此之外，PAG 开发了 BMP 预合成的功能，支持导出所有 AE 特性，其原理是在合成的层面将渲染结果截取成图片，然后进行视频编码。同时，针对 BMP 预合成无法再次编辑的缺陷，PAG 增加支持了矢量和 BMP 预合成混合导出的方式，不仅保持了动画的可编辑性，还完美支持了所有 AE 特性的导出。以设计师在 AE 频繁使用的第三方特效插件、表达式、3D功能等为例，市面上的其他动效方案导出会存在效果缺失的问题，通过 PAG 导出插件 PAGExporter，可以很轻松地实现上述效果的所见即所得即导出，充分发挥设计师的创造力。以下列动效模版为例，其他的方案无法直接导出特效，因此导致导出的粒子特效部分无法识别：而PAG的“BMP 预合成”导出模式支持所有AE特效，因此完美还原了效果。设计师无需为精心设计的效果无法导出而烦恼，只需要关注视觉效果本身即可。设计师目前使用市面上的方案基于 AE 设计导出动效文件，会有以下几个痛点：1）AE 中动画效果和导出文件预览效果不一致出现这个问题的原因是设计师使用了不支持直接导出的 AE 特性，导致效果无法正常导出，在设计完动效导出预览时才发现问题，从而导致设计返工。针对这个问题，我们在 PAG 导出面板中特意增加了自动提醒功能，提醒什么情况下该使用 BMP 预合成，什么情况下可以直接导出，而无需到官网去查询支持的矢量 AE 特性列表，提高设计师决策的工作效率。设计师在设计动画的过程中，可以通过快捷键唤起导出面板，导出面板中会呈现自动提醒功能，并提供了定位功能和设计建议。同时 PAG 在面板中增加了一键设置 BMP 预合成的功能，方便快捷地将合成导出 BMP 预合成。- 同类解决方案的实现由于依赖平台端的渲染接口进行渲染，存在各平台端 AE 特性支持不一致和部分特性渲染不一致的问题，单平台的效果预览无法保证其它平台的正常渲染。而PAG 方案基于自研的跨平台渲染引擎进行绘制，平台端仅仅提供渲染环境，确保了所有平台的效果的一致性，设计师只需要在桌面端确认预览效果是正确的，其它平台由 PAG SDK 保障渲染一致性，不需要设计师多平台验证。
- 虽然同类解决方案提供了网页端等预览方式，但不支持修改文本和替换占位图，只有交付开发才能预览真实线上效果。针对该问题，PAG提供了桌面预览工具 PAGViewer，不仅可以预览动态效果，并且支持在预览工具中修改展现效果，支持设计师在本地填充素材预览，无需等到上线后才能确认真实的效果。如下图所示。
在客户端，动效的性能与其复杂程度强相关，相同的动效，不同的设计方式其性能相差很大，由于性能问题导致的返工比比皆是。针对此问题，PAG在桌面预览工具 PAGViewer 上增加了性能检测的功能，可以让设计师很方便地看到PAG动画的基本信息，还有量化的性能指标，定量地评估 PAG 文件的性能，以可视化的方式感知素材性能状态，方便设计师进行针对性的优化，而不需要依赖研发上线测试性能状态，极大减少了素材优化的返工耗时。通过以上工具，不仅显著提升了设计师素材生产的效率，更重要的是将设计师和开发工程师的工作边界清晰地划分出来，设计师基于桌面工具就可以预览线上效果并评估动效文件的性能，可以很好地实现闭环，减少不必要的效果沟通与返工，提升动效上线效率。与同类解决方案不同，PAG 文件采用可扩展的二进制文件格式，可单文件集成图片、音频等资源，实现单文件交付，设计师交付的不再是一个集成多种资源的文件夹。除此之外，PAG 文件采用了动态比特位的压缩技术，导出相同的 AE 动效内容，在文件压缩率方面大幅领先于同类解决方案，可大幅减轻移动端资源下发的压力。PAG目前已经覆盖了所有常用平台：Android、iOS、macOS、Windows、Linux、Web和微信小程序，同类解决方案仅仅覆盖了上述平台中的一部分，在使用层面存在一定的制约性。目前PAG已于2022年1月14日正式开源至 Github ，现可免费下载使用。团队日常对接 2000+持续增长的设计师和研发用户群，SDK已接入服务了腾讯内外400+产品业务，包括微信、QQ、王者荣耀、知乎、小红书、哗哩哔哩、虎牙直播、MOMO陌陌、豆瓣等多款产品，稳定性经过了海量用户的持续验证。- 官网（下载及教程）：https://pag.art/
- 官方论坛（问题解决&官方互动）：https://bbs.pag.art/
腾讯 AVGenerator OTeam
AVGenerator Oteam开源协同小组，专注在音视频编辑、拍摄、图形图像特效、C++跨平台渲染等领域四年多时间，主导研发的 PAG 动效组件已接入服务了400+ 应用，包含微信、QQ、王者荣耀、哔哩哔哩、小红书、京东生活助手、知乎等多款产品也在接入使用中。