科技对学习的影响 ,广州络成网络科技有限公司

腾讯宣布PAG动画组件正式开源 已广泛用于微信、手机 QQ、王者荣耀等App

时间:2022-01-14 15:12:49 | 作者:爱科技网 | 点击: 107 次

1 月 14 日消息,2022 年 1 月 14 日,腾讯宣布 PAG(Portable Animated Graphics)动画组件正式开源。

PAG 是腾讯 AVGenerator OTeam 自主研发的一套完整的动画工作流解决方案,助力于将 AE (Adobe After Effects)动画方便快捷的应用于各平台终端。和业界常用的动画工作流解决方案相比,支持的 AE 特性更多,支持的平台更广(增加了 macOS、Windows 和 Linux),性能方面也做了深层次的优化,支持文本和占位图编辑替换,可以与视频编辑场景紧密结合。目前已经广泛应用于公司内外几十款 App,包含微信、手机 QQ、王者荣耀等头部 App。

解决的痛点:

当前最好的动画设计软件是 Adobe After Effects(简称 AE),从 AE 动画制作到终端 App 呈现,传统的实现方式如上图所示,有三大痛点:实现成本高、沟通成本高和性能难以保证。

PAG 的流程图如下图所示,设计师使用 AE 设计好动画以后,通过 PAGExporter 插件导出 PAG 动画文件,在桌面端预览效果确认无误后,部署上线,各平台端接入渲染 SDK 后可以直接加载 pag 文件实现动画渲染。

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

PAG 的特色优势

1、文件体积小

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

2、全 AE 特性支持

支持纯矢量导出方式的同时,还引入了 BMP 预合成结合矢量的混合导出能力,实现支持所有 AE 特性的同时又能保持动画运行时的可编辑性。

3、运行时可编辑

在保留设计预设动画效果的前提下,可以在运行时轻松替换文本和占位图的内容,能够大幅降低类似照片模板和视频模板的研发成本。PAG 支持的编辑特性不仅限于占位资源的替换,还支持图层级别的自由组合。能够对每个动画的图层树进行任意的增删改位移,也能够根据编程规则动态组合多个原子 PAG 特效素材合成一个运行时的定制化模板,能够完美适配类似一键出片、游戏战报等智能模板的需求。

4、便捷的导出插件

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

5、完善的桌面预览工具

效果预览

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

性能检测

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

PAG 的应用场景

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

1、UI 动画

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

2、贴纸动画

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

3、照片 / 视频模板

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

4、智能剪辑

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

PAG 现已开源:

官方地址:https://pag.io/

Github 地址:https://github.com/ Tencent / libpag