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

AI资讯1年前 (2023)发布 AI工具箱
334 0 0

以“滚动的一串文本”动画效果为例,其中文本信息是内容,滚动就是动画效果。pag可以在保留预设动画的情况下,做到修改文本的内容,字体,字号,颜色等十几项属性。

除了文本可以被修改替换,PAG还提供了占位图的替换能力,同样在保留预设动画的情况下,不仅可以替换照片,甚至可以直接把视频也放进占位图。

这样一来,不仅避免了设计反复根据需求修改动画特效的痛苦,还能将动画特效运用于视频剪辑中。

像我们在开头看到的王者特效,包括昵称和KDA其实都可以被一键替换,不需要再将对应的动效重新设计一遍。

总结一下,PAG最大的优势有以下几点:

  • 输出动画文件极小,比同类型方案平均降低50%
  • 支持所有AE效果导出,包括第三方AE特效插件
  • 运行时保留动画效果,实时编辑文本替换占位图
  • 提供从导出、预览、到性能优化的完善工具链支持
  • SDK覆盖所有平台,包含Web以及服务端渲染能力

解决的正是当前短视频特效设计师们最头疼的几大痛点。

其实在PAG出现之前,业内已经有一些类似的设计插件,但或多或少存在一点问题。

PAG究竟是怎么解决它们的?

我们与PAG的研发团队、腾讯PCG发布器中台下编辑子工作组的负责人Dom取得了联系,了解了背后的实现原理。

Dom表示,PAG早期最有挑战的地方,其实就在于“动画文件设计”和“全AE特性支持”这两部分。

在输出文件格式方面,已有的JSON等格式存在两大问题:解码速度慢、压缩率低

为此,团队重新设计了一种名为.pag的文件格式,采用二进制数据结构来存储动画信息。

一方面,二进制数据结构不需要做字符串匹配、序列化等操作,解码速度会比JSON等格式的文件快上许多。测试数据显示,在解码速度上,PAG格式的动画文件要比JSON文件快12倍

另一方面,相比于JSON,二进制数据结构具有更高的压缩率。

JSON文件导出的冗余信息较多,而二进制的数据结构则能跳过大量默认值存储,并使用动态比特位来紧凑存储。因此相同的动画内容,PAG文件比同类型方案压缩文件小50%左右

此外,采用二进制数据结构还有一个额外的好处,在导出动画文件时不用再搭配“图片包”(外挂图片),一个文件就能搞定,包括音频也能够内置。

说完文件格式,再来看看PAG文件是如何做到支持所有AE效果的。

这个特性使得PAG文件既能实时预览复杂特效,又能确保动画的可编辑性,但在之前,它们并不能同时被实现。

这是因为传统的动画的导出模式有两种,即矢量导出序列帧导出

矢量导出的动画文件具有可编辑性,但缺点是一些复杂特效无法在移动端实时预览,因此无法做到全AE特性支持。

序列帧导出基于截图的原理解决了这个问题,也就是将复杂的视觉动效全部截成图片,再实现导出。但这就导致文件大小可能高达几十上百兆,对移动端而言“又大,又没法编辑”。

为了让文件既可以编辑,又能保证精彩动态效果的实现,PAG的研发人员们想到了混合导出的方法。

简单来说,就是给不需要可编辑性的图层打标记。这样在导出时,需要保留编辑性的图层就会以纯矢量形式被导出,而打了标记的图层,则以序列帧的方式导出。

值得一提的是,为了尽可能压缩导出文件的大小,PAG团队还自己设计了bmp预合成的格式,充分利用了视频的极限帧间压缩能力,并在此基础上扩展了对透明通道的支持。

再加上渲染方面的优化,最终,相比于传统图片序列帧,视频序列帧格式的文件大小可以降低到原来的1.24%左右。

但从基础功能的实现,到如今成为一整套完整的工具流,PAG并非“一蹴而就”。

与之相反,虽然SDK去年才开始对外开放,但早在2016年,PAG的第一行代码就已经写下。

从最初的1.0版本迭代到如今的形态,PAG已经走过了4个版本。

“从写下第1行代码,到第1次跑通,团队就用了6个月时间。”

至于为何要选择坚持打磨这样一款工具产品,Dom提到了一个“回忆杀”的词语Flash

他希望PAG能在视频编辑这样一个场景里,把这套工作流带到移动端动画制作上,降低或者消除动画相关的研发成本。

这个想法在市场上也很快有了案例验证——

PAG项目开始的同一年,支持将矢量动画导出到各个平台的AE插件Lottie问世。这款插件的成功问世,证明了还原Flash这套设计到研发之间的流畅工作流“跑得通”。

和PAG团队一样,Lottie背后的开发者同样有着深厚的Flash相关经验,只是Lottie主要面向UI动画设计,不太适用于短视频场景。

为了能够满足短视频贴纸动画以及模板的开发需求,PAG团队选择了继续自研。

6个月之后,PAG 1.0版本出炉。

腾讯的设计师们试用后,PAG团队得到的反馈是“存在不少问题”,核心概括起来就是:

为此,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/

— 完 —

© 版权声明

相关文章

暂无评论

暂无评论...