专栏首页PAG动效产品信息产品介绍|PAG:消除动效研发成本
原创

产品介绍|PAG:消除动效研发成本

PAG 是腾讯多媒体技术委员会下 AVGenerator Oteam开源协同小组自主研发的一套完整的动效工作流解决方案,致力于将 AE (Adobe After Effects)动效一键导出并快捷地应用于各平台和终端。和业界常用的动效工作流解决方案相比,PAG支持的 AE 特性更多,覆盖的平台更广(Android、iOS、Web、macOS、Windows和Linux),性能方面也做了深层次的优化,支持文本和占位图编辑替换,可以与视频编辑场景紧密结合。目前已经广泛应用于公司内外几十款 APP,包含微信、手机 QQ、王者荣耀、哔哩哔哩、虎牙直播等头部 App。

一、PAG诞生的背景

从 AE 动效制作到终端 App 呈现,传统的实现方式如下图所示,有三大痛点:实现成本高、沟通成本高和性能难以保证。

近几年,业界诞生了像Lottie、SVGA这样的动效工作流解决方案,Lottie 最早从 UI 动画场景出发解决矢量动效渲染的问题,从官方社区来看,我们能容易发现 Lottie 的矢量基因,社区作品大多是矢量图形类动效。SVGA 是 YY 直播的开发工程师 2017 年发布的一套跨平台动效解决方案,诞生于直播场景,SVGA 不支持复杂矢量图形动效,对位图动效的支持超过 Lottie,其最初的目标是为了改善和弥补 Lottie。不可否认,两者都是业界优化的动效解决方案。PAG 诞生于 2016 年,最初的原因是为了解决更为复杂的视频编辑场景下动效渲染问题,同时又完美覆盖了UI动画和直播场景。

一个有意思的共同点,以上三种方案的作者都有比较丰富的 Flash 相关背景,都在把 Flash 完善动效工作流的实现方式带到移动端,三者出发的场景不同,因此实现的方式也会存在一些差异。

下图是三种实现方案的简单对比。

二、完善的动效工作流解决方案

PAG的工作流程图如下图所示,设计师使用 AE 设计好动效以后,通过 PAGExporter 插件读取 AE 工程文件,根据具体需求选择矢量导出、BMP 预合成、混合导出方式中的一种导出PAG 二进制文件,客户端对该 PAG 二进制文件进行解码、渲染,各端共享一套 C++ 实现,平台端只做接口封装。

相对传统研发还原的方式,PAG 方案显著提升了动效素材上线的效率:设计师设计完成后可以直接输出动效文件,研发不需要再参与代码还原,只需要接入一次SDK即可做到素材自助上线,也避免了反复进行效果确认的联调时间成本,并且还能够批量化生产素材,从流程上直接取代传统小工作坊形式,利用工业化生产方式大幅提升设计和研发效率。

PAG的工作流程主要包含三部分:

PAG 渲染SDK、导出插件 PAGExporter和桌面预览工具PAGViewer。

跨平台渲染SDK

PAG渲染SDK目前已经涵盖了Android、iOS、Web、macOS、Windows和Linux等几乎所有的主流平台。PAG SDK的渲染主体通跨平台的C++来实现,所有平台均一致开启GPU硬件加速,除了可以确保各平台测的渲染一致性外,也能轻松实现跟音视频编辑拍摄等复杂场景的深度融合。关于PAG SDK的一些技术特色,我们会在下个章节进一步阐述。

便捷的导出插件

针对设计师设计动效的痛点,导出插件增加使用了不支持 AE 特性提醒功能,支持一键设置BMP 预合成、设置占位图的填充模式、设置 PAG 动效的伸缩模式等。另外导出插件内置了数十种自动优化素材的策略,让设计师轻松制作出效果和性能俱佳的动效素材。

完善的桌面预览工具

实时效果预览

桌面预览工具不仅支持桌面端预览动效效果,还支持设计师本地填充素材,实时预览填充效果,无需等待上线后才能确认真实效果,避免了大量来回返工的成本。

性能检测可视化

性能检测可以让设计师很方便的看到pag动效的基本信息,还有量化的性能指标,定量的评估pag文件的性能,方便设计师进行针对性的优化,而不需要等到上线前才会暴露性能问题。

三、PAG的技术特色

AE特性全面支持

无论是PAG还是Lottie、SVGA,所支持的AE特性仅仅是AE众多特性中的很少的一部分,这在一定程度上限制了设计师的创造力。针对这个问题,PAG新增了BMP预合成的导出方式,支持导出所有AE特性,其原理如下图所示,在合成的层面将渲染结果截取成图片,然后进行视频编码。

针对视频不支持透明通道而动效需要包含透明通道的问题,在编码的层面扩展了透明通道的支持,如下图所示。

由于采用的是截图的方式,BMP预合成不支持可编辑。为了保持动效的可编辑性,PAG增加支持了矢量和BMP预合成混合导出,从而实现在支持AE所有特性的同时又保持运行时的可编辑性,满足了不同业务场景的需求。

高效的动效文件

PAG动效文件采用了二进制的数据结构来存储AE动效信息。二进制数据结构能够非常方便的单文件集成任何资源,如位图、音频、视频资源等,实现单文件交付。同时二进制数据结构不需要像JSON一样处理字符串匹配问题,解码速度可以快90%以上。另外在压缩率方面,相比JSON,二进制数据结构可以跳过Key的内容,只存储Value,这样能节省大量空间。如果只做到这个程度,其实就是Protocol Buffers这种通用的二进制序列化方案的原理。为了进一步压缩数据,结合AE动效数据的特征,利用时间轴属性存在默认值和AE动效中存在大量连续整形、Float类型数据的特点,PAG采用了动态比特位压缩的技术,实现了比特位级别的存储和读取,大大减少了存储的冗余空间。

经过一系列的压缩策略,导出相同的 AE 动效内容,在文件解码速度和压缩率上均大幅领先于同类型方案。采用可扩展的二进制文件格式,可单文件集成包含图片、音频等任意设计资源。

运行时可编辑

在保留设计预设动效效果的前提下,PAG支持在运行时轻松替换文本和占位图的内容,能够大幅降低类似照片模板和视频模板的研发成本。

PAG 支持的编辑特性不仅限于占位资源的替换,还支持图层级别的自由组合。其基本原理是引入了图层渲染树的编辑架构,一个文件就是一棵渲染树,支持图层级别的任意修改位置甚至增删图层,也可以把别的PAG文件添加到这棵渲染树中作为子树。能在空间维度上进行自由的排列摆放。而在时间轴的组合上,我们提供了PAG时间伸缩的能力,包含循环,变速,定格等多种自适应模式。每个图层又提供了起始时间的调整能力,支持自由设置在时间轴上的相对位置,能够灵活适配用户视频的时长。

经过这些改造,新的接口不仅满足了UI动画的编辑性需求,还满足了视频后编辑模板类的需求。如在照片模板和视频模板场景中,固定时间轴和尺寸的模板已经逐渐出现了在应用上的瓶颈。特别是当一键出片、王者战报等智能模板需求的出现,整个模板不是由固定的时间轴组成,而是可能由多个原子特效组件拼装而成。现在无论哪种使用场景,都可以简化为两个步骤:利用空间和时间的组合能力构建一个渲染树,然后播放或者导出即可。

整合视频渲染

PAG和Lottie方案很重要的一个区别点就是应用场景的不同,Lottie方案依赖了平台相关的UI框架,开发成本较低,但也导致了它只能渲染到UI视图上,并且无法在子线程中使用。这样的设计可以很好的满足UI动画场景下的使用,但难以应用在视频编辑场景下。

PAG的整套动效方案是基于C++跨平台架构研发的,从最底层的动效插值器,还原到上层的时间轴和图层渲染树系统,虽然开发成本较高,但是所有端共享同一套代码,天然的能保障跨端渲染一致性。最重要的是能直接渲染到离屏纹理上,并完美支持子线程动效渲染,从而实现与视频编辑SDK框架的无缝整合。同时,针对视频编辑场景对于性能要求严格的特点,如单帧渲染并行的存在视频编解码及各种特效处理,这时候留给PAG的渲染时间就不太多了。为了提高实时预览的性能,PAG进行了两个方向的优化。第一个方向是根据动效文件的本身的特点,利用素材静态区间可跳过重复的绘制。第二个方向是利用空间换时间的思路,在PAG渲染内部设计了三级缓存架构。文件缓存解决了单个PAG文件添加多次解码复用的问题,绘制缓存解决了帧间绘制缓存复用的问题,根据渲染内容一般不会随着时间轴变化,反而是轻量的矩阵参数会频繁的变化的特点,增加了内容缓存,避免了重复内容的绘制,从而提升了单帧渲染的性能。

经过以上处理,PAG不仅很好的支持了UI动画的场景,并且将PAG动效的使用拓展到了视频编辑、拍摄以及直播对于性能要求更高的场景。

四、PAG的应用场景

总结下来,PAG 目前主要使用在以下几大场景:

UI动画

设计师设计出动效文件后,研发只需要替换预设的文本内容即可,并且文件体积非常小。

贴纸动效

PAG 的动效文件可以在任意子线程渲染,可以合成到视频画面,作为贴纸、字幕、特效、转场动效使用,且支持保留动效效果前提下让用户自己修改文本内容。

贴照片/视频模版

PAG 支持将内置的图片作为占位图替换,并保留所有动效效果。因此可以将整个 PAG 动效设计成一个模板,把预设的占位图替换成用户选取的照片,自动套用效果生成视频。全程可以让设计师自由批量生产模板,无需研发介入。仍然基于图片替换原理,PAG 也支持将占位图替换为视频,实现视频模板功能。

智能剪辑

智能剪辑是围绕用户上传的视频内容,生成定制化的模板,模板本身是不固定的,由多个 PAG 文件组合而成,类似活字印刷。设计师可以利用这个特性,构建自己的特效组件库,然后对接AI的识别能力,根据一定规则组合得到无限数量的模板效果,可以做到一键出片。这块目前的典型应用场景是王者荣耀的周战报功能,随机生成游戏高光时刻视频。

五、已接入使用的产品

据不完全统计,PAG已经接入了腾讯内外70+ APP或业务,包含微信、QQ、王者荣耀、腾讯视频、QQ音乐、哔哩哔哩、京东生活助手、虎牙直播等头部APP,下面是部分已经接入的APP或业务。

六、开源共建

PAG现已开源

Github地址:

https://github.com/Tencent/libpag

欢迎广大设计师和开发者参与,使用或共建 PAG 动效工作流。

微信公众号:PAG动效

如果想了解、接入PAG,欢迎访问PAG的官网或微信公众号。

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

登录 后参与评论
0 条评论

相关文章

  • 王者QQ微信都在用的动画神器要开源了:把交付时间缩短90%

    给1分钟的王者“击杀”合集做一系列炫酷动画,并集成到客户端的一键战报生成功能中,需要多长时间?

    量子位
  • PAG体验:十分钟完成AE动效部署上线各平台!

    活动背景 6月28日,首期Techo Day 腾讯技术开放日将于线上举行啦! 「Techo Day」希望通过腾讯、腾讯云有关技术干货的课程分享与应用工具的动手...

    陈仁健
  • 玩转AE丨动效设计必备指南

    导语 动效是用户体验的重要组成部分,也是产品调性的重要体现。如今动效设计也有了更多的解决方案,如Framer、Principle、Flinto、Protopie...

    腾讯ISUX
  • 腾讯研发出新招,从此动画制作就用PAG

    2020年开始,突如其来的疫情让线上生活形式飞速发展,短视频平台成了广大网民休闲娱乐、学习技能、分享生活的重要途径。

    前端小智@大迁世界
  • PAG 4.0 正式发布:SDK 大小降至 35%,新增 Web 平台支持

    渲染引擎内核的升级,主流平台全面覆盖

    陈仁健
  • 产品动效设计全方位科普手册,超级全面的分析!

    本文主要讲述了为什么做动效,好的动效设计的标准是什么,如何做动效设计,以及如何使自己设计的动效完美落地。

    宇相
  • 短视频特效“耍花招”:线上投篮、摆摊,让画中人摇摆,浅谈腾讯微视的AR基建

    魔性的背景音乐、酷炫的AR特效、多元的内容题材,让大众欲罢不能的短视频App正在成为内容生产和传播主要渠道之一。

    AI科技大本营
  • 那些高效的界面设计工具

    近年来界面设计工具不断推陈出新,一些新兴的实用界面设计工具渐渐走进设计师们的视野,逐步改变着设计师的工作模式。作为互联网设计师,效率至上的工作原则敦促我们不断尝...

    腾讯ISUX
  • 设计优秀app的秘密

    好的产品往往做好了两点:功能和细节设计。功能吸引用户使用你的产品,细节设计将你的用户留下。优秀的细节设计能够使你的产品在众多竞品中脱颖而出,优秀的微交互设计往往...

    前朝楚水
  • 经验分享 | 如何更好地推动产品及交互需求顺利落地?

    我很喜欢这样的一句话:“在做设计的时候,最大的阻力不是用户相关问题,而是内部的认知、利益点、看待事情方式的不一致。”;尤其是在推动产品及交互需求落地的过程中,感...

    前朝楚水
  • 2019TLC大会精彩回顾—大前端·信息流

    2019年8月17日,第三届TLC大会在科兴科学园国际会议中心完美落下帷幕。作为一年一度的技术盛会,本次大会云集国内外19名技术专家,现场参会人数超过600人,...

    腾讯IVWEB团队
  • 开源React Native组件库beeshell 2.0发布

    2018年,我们开源了React Native组件库——beeshell 1.0。时隔一年,我们对React Native组件库继续优化,实现beeshell ...

    美团技术团队
  • 开发中的动效设计与实现 —— 贝塞尔曲线动画的插值法

    一个动画一般有这些参数 —— 动画时间、属性变化量、以及贝塞尔插值曲线。在动效标注的时候,也只需要标注这些参数就可以完整的给UI研发写动效了。一个动效所涉及的元...

    蜻蜓队长
  • 智慧矿山-选矿工艺数字 3D 可视化

    现代科技和工业的发展对矿物原料的要求越来越高,直接开采的原矿石往往达不到标准,而原矿通过选矿加工后则可以满足要求。选矿技术在冶金、煤炭、化工、建材和环保等部门都...

    HT for Web
  • 智慧矿山-选矿工艺数字 3D 可视化

    现代科技和工业的发展对矿物原料的要求越来越高,直接开采的原矿石往往达不到标准,而原矿通过选矿加工后则可以满足要求。选矿技术在冶金、煤炭、化工、建材和环保等部门都...

    图扑软件Hightopo
  • 欧阳金凯:以歌会友-全民K歌,致力打造最好的音乐娱乐社交系统

    LiveVideoStack:欧阳金凯你好,能否向LiveVideoStack的读者介绍下自己的工作经历,以及目前负责工作内容和专注的领域。

    LiveVideoStack
  • 关于交互动效视觉设计的些许笔记

    3、下拉刷新完成 (下拉刷新效果去掉 同时出现新的内容)

    宇相
  • 见招拆招,敏捷实战:揭秘全民K歌背后的音乐黑科技

    随着数字音乐的不断发展,线上 K 歌越来越流行。移动 K 歌从用户深层情感需求与消费场景出发,满足了新生代用户表达情绪、抒发个性的需求。而全民 K 歌作为 K...

    QQ音乐技术团队
  • 支付安全感的设计思考

    腾讯ISUX

扫码关注腾讯云开发者

领取腾讯云代金券