腾讯PAG移动端动画组件即将开源,推动高效动画制作普及

动画作为最吸引眼球的内容素材之一,在各类终端APP中都得到了创作者的垂青。动画作品能帮助用户交互更加顺滑,更能让主题内涵得到更丰满的诠释,但也正因如此,动画的设计、制作以及导出都尤为耗费心神。

为解决这一问题,腾讯PCG发布器中台研发了一套完整动画工作流解决方案——PAG(Portable Animated Graphics)。

PAG不仅将其他动画工作流解决方案存在的多项痛点问题予以解决,更在相同矢量动画的条件下,文本大小可以做到Lottie的50%左右,性能相对比Lottie也有了很大的提升,单帧平均耗时小于Lottie的50%,以更高的可编辑性解放了设计师的创造性,提升了工作效率。

不少动画行业的小伙伴们在许久之前就已跃跃欲试,但苦于始终没有向外开放,只能远远观望。如今,好消息终于来啦:据悉,今年一月份,PAG即将在github等平台对外全面开源,希望能为更多动画创作者提供优质服务。

据悉,在内测期间,PAG已应用于腾讯多款知名APP之中,例如微信、QQ、王者荣耀、QQ音乐、腾讯视频等等。

正值PAG将要对外开放之际,让我们从技术层面解构PAG,一探其性能优越之究竟。

PAG动画工作流,完善的动画解决方案

目前业界常用的动画工作流解决方案主要有Lottie和SVGA两款软件,他们都可以将AE制作的动画导出成一个文件,在终端APP中加载渲染使用,以此提升动画开发上线的效率。

其中Lottie最早是为了解决矢量图形类动画的问题,功能也几乎全部集中于此;SVGA则是为补足Lottie功能缺失而设计出的跨平台动画解决方案,因此并不支持复杂矢量图形类动画。双方在性能上各有所长,同样也各有所缺。

PAG则针对Lottie和SVGA进行了补足与优化。在矢量动画渲染性能上,PAG在Android/iOS平台的文件解码耗时、平均每帧渲染耗时等参数指标上,都远快于Lottie和SVGA,实现了效率层面的跨越式提升。在矢量导出方式上,PAG还支持引入了视频序列帧结合矢量的混合导出能力,实现支持所有AE特性的同时,又能保持动画运行时的可编辑性,从而得以最大程度地发挥设计师的创造力。

不仅如此,由于Lottie和SVGA都是用AE Script SDK来导出AE工程,而AE Script SDK本身不能访问AE文件中的所有属性,导致二者有时导出文件会发生内容缺失现象。PAG则采用AE C++ SDK来导出AE工程,允许访问AE文件中所有属性和部分高级API,实现了AE文件的完整导出。

功能突破,多方位提升创作效率

那么PAG具体是如何做到这一点的呢?

从技术层面讲,PAG采用C++实现渲染,所有平台共享同一套实现,平台端只作为封装接口简单调用,提供一个渲染环境,并无强依赖性,因此PAG能够做到所有平台支持特性一致,渲染效果一致。

不仅如此,PAG的技术能力还包含BMP预合成、图层级别编辑、整合视频渲染等先进功能。

BMP预合成功能的加入,完美弥补了PAG支持AE特性较少的不足,支持导出所有的AE特性,适用于不可编辑的场景。与此同时,PAG中还增加了支持矢量和BMP预合成混合导出,从而实现支持AE所有特性的同时又保持运行时的可编辑性。

图层级别编辑,则是为了适应如今多PAG文件组合,由业务方去控制组合的规则。简单来说,一个文件就是一棵渲染树,支持图层级别的任意修改位置甚至增删图层,也可以把别的PAG文件添加到这棵渲染树中作为子树,时间轴的循环、变速、定格也由你随心所欲。

要让动画在视频编辑场景中完美整合,就必须解决两个问题:支持离屏渲染绘制、子线程渲染。PAG整套动画方案都是基于C++跨平台架构研发的,天然保障了跨端断然一致性,并能够直接渲染到离屏纹理上,完美支持子线程动画渲染。在此过程中,PAG还采用了时间静态区间和三级缓存结构最大限度地降低开销与缓存,为用户提供更顺滑的创作体验。

除此之外,PAG的服务端渲染和web端支持也给到了用户更广阔的创作空间与时间余裕。

目前来看,PAG对外开源后将有助于UI动画、贴纸动画、照片模板、视频模板以及智能剪辑等功能的开发。

一、UI动画

如上图右下角的Pick按钮动画,设计师设计出动画文件后,研发只需要替换预设的文本内容即可,并且文件体积非常小,仅2KB左右。

二、贴纸动画

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

三、照片/视频模板

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

四、智能剪辑

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

可以看出,PAG作为腾讯所推出的动画工作流解决方案,功能已经较为完善与健全,具备更为优秀的效率与便捷度,也最大限度地降低了开发者的时间、创意成本。不仅如此,在经历了诸多腾讯内部产品的先行实验,PAG的实用性也毋庸置疑。

PAG即将对外开源,对如今正在从事动画创作的工作者们的帮助不言而喻,也将以自身功能的优越性激发更多潜在创作者加入到动画行业之中,为这片蓝海提供更多的有生力量,为移动端动画产业贡献属于自己的技术价值。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容