加入收藏 | 设为首页 | 会员中心 | 我要投稿 应用网_阳江站长网 (https://www.0662zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 站长资讯 > 动态 > 正文

腾讯推出移动端动画组件PAG,释放设计生产力!

发布时间:2020-09-22 07:45:46 所属栏目:动态 来源:站长网
导读:如今,短视频应用百花齐放,为了吸引更多流量,动画设计师和开发工程师往往为了制作夺人眼球,极具创意的动画特效花费大量心血,但最终动画需求交付上线的效率和质量,仍旧不尽如人意。问题出在哪里?主要还是工具没有选对! 传统的AE设计,总结下来有以下

如今,短视频应用百花齐放,为了吸引更多流量,动画设计师和开发工程师往往为了制作夺人眼球,极具创意的动画特效花费大量心血,但最终动画需求交付上线的效率和质量,仍旧不尽如人意。问题出在哪里?主要还是工具没有选对!

传统的AE设计,总结下来有以下三个核心痛点:

研发成本高:每个动效都需要研发通过代码来还原,单独排期的特效以及手工配置还原的过程,,包括后续复用及改动都需要大量的研发人力持续投入。

生产周期长:设计师和研发人员需要反复确认效果还原度。这样很难跟上运营节奏,容易错过时事热点。

视觉动效弱:AE里有很多复杂动效,使用纯代码还原起来非常困难,设计师只能不断简化效果以达到跟开发成本的平衡。

为了解决上述痛点,腾讯PCG发布器中台主导研发了一款动画开发“神器”——PAG。

一、PAG是什么?

PAG (Portable Animated Graphics) 是一套完整的动画工作流,诞生之初就是为了降低或消除动画相关的研发成本,打通设计师创作到素材交付上线的极速流程,不断输出运行时可编辑的高质量动画内容。

为什么选择PAG?

(一)传统AE设计 VS  PAG工作流

腾讯推出移动端动画组件PAG,释放设计生产力!

上图为微视的一期运营海报,可以看到在视频编辑场景下包含大量的动效素材。包括动画贴纸,转场特效,以及天气和地理位置等带动画的智能填充文本。

1. 传统AE设计思路:设计师使用AE先设计好动画,然后导出视频Demo。研发再来根据Demo拆解动效组成。如果是不支持的特效能力,还需要单独排期进行开发。流程图如下:

腾讯推出移动端动画组件PAG,释放设计生产力!

2. 引入PAG后的动画工作流程:

腾讯推出移动端动画组件PAG,释放设计生产力!

设计师使用AE导出插件,能够直接将制作好的动画导出成PAG文件,经过桌面预览工具的确认,再交付给终端由SDK渲染成动效内容。

通过传统AE设计与PAG工作流的简单PK,不难发现使用PAG工作流,研发只有一次性接入SDK的成本即可做到素材自助上线,不再需要参与代码还原。这也避免了最耗时的研发和设计的联调环节,从而实现批量化的素材生产流程,大大提高了设计和研发的效率。

(二)PAG的特色优势

对比市面上其他的动画组件,PAG具备以下3个显著亮点:

1、高效动画文件

PAG——命名上就可以看出,文件格式本身在整套方案中的重要地位,PAG在文件格式设计上主要追求三个核心目标:1)单文件交付  2)解码速度快 3)动画文件小。

基于以上的目标,PAG采用了二进制的数据结构来存储动画信息。因为二进制数据结构能够非常方便的单文件集成任何资源,并在解码速度上,比JSON这类文本数据可以快几十倍。

腾讯推出移动端动画组件PAG,释放设计生产力!

在控制文件大小方面,PAG通过利用动画文件本身的特点,获得了极高的压缩率。除了跳过大量默认值的存储外,PAG在文件的每个属性组里,都会尽可能地把相似的数据重新排列,让他们聚合到一起,目的是绕开字节对齐的问题,使用比特位来紧凑存储。相同的动画内容,通过以上策略的压缩,可以比业内同类型方案平均减少50%左右的文件大小:

腾讯推出移动端动画组件PAG,释放设计生产力!

2、全AE特性支持

PAG支持矢量和序列帧的混合导出。设计师可以按图层标记导出类型,从而实现支持所有的AE特性又能保持运行时的可编辑性。

腾讯推出移动端动画组件PAG,释放设计生产力!

为了在实现混合导出后,尽可能压缩序列帧的大小。PAG内部设计了视频序列帧的格式,充分利用了视频的极限帧间压缩能力,并扩展了透明通道的支持。另外,视频的格式还可以在运行时利用硬件加速解码,从而获得更高的渲染性能。

腾讯推出移动端动画组件PAG,释放设计生产力!

最后再通过导出插件在视频编码器上的针对性优化,最终做到了相比传统图片序列帧仅1.24%左右的文件大小。

3、桌面效率工具完善

腾讯推出移动端动画组件PAG,释放设计生产力!

PAG提供的AE导出插件PAGExporter内置了40多种自动优化和提醒策略。例如自动缩小图片资源的分辨率,弹窗提醒相邻的序列帧图层可以合并等等。这些优化策略还在持续地增加,这样可以在导出的环节就进行性能把关。

而桌面预览工具PAGViewer确保了渲染结果跟移动端完全一致,这样设计师可以所见即所得地生产素材,而不需要上线来回确认。并且提供性能监测面板,能够直观地看到每个素材量化的性能指标,并配套说明了各种指标的优化方向。最后通过服务端文件性能校验接口,业务方可以把它与素材管理端进行整合,在上传素材时自动判断素材性能是否合格,将性能把关做到全自动化。经过这一系列自动化工具的配合,设计师就能够独立地进行素材生产,制作出效果和性能均优异的动画素材。

腾讯推出移动端动画组件PAG,释放设计生产力!

五大应用场景,轻松玩转PAG

说了这么多,PAG具体是如何灵活应用到动画制作场景中呢?

让我们来看看具体的应用效果吧~

1、UI动画

腾讯推出移动端动画组件PAG,释放设计生产力!

上图右下角的Pick按钮,就是一个利用PAG实现的可交互UI动画效果,支持设计师编程控制进度、文本内容,从而做到对整个动画完全把控,研发只需要替换预设的文本内容即可。并且文件体积非常小,仅2KB左右。 

2、贴纸字幕

腾讯推出移动端动画组件PAG,释放设计生产力!

(编辑:应用网_阳江站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!