让建站和SEO变得简单

让不懂建站的用户快速建站,让会建站的提高建站效率!


腾讯研发动画组件,以后动画制作用PAG

发布日期:2022-03-13 20:29    点击次数:185

你好,我是tiantian。

咱们知道,动画殊效不错辅助视觉制作焦点,素质闪耀力的标的,越来越为雄壮视觉假想师怜爱,并平日诳骗于各样场景斥地。

对于动画假想器具,既有 Framer.js、Origami, 也有交互原型类 Principle、Flinto,还有 Figma 自带动画演示功能的器具,然则对于一些视觉殊效、非逻辑抒发类动画,假想师频频会借助 AE 完成。

缺憾的是,AE动画后果的斥地于今也莫得一种完备且老练的跨平台惩处有预备,导致动画需求录用上线的遵守,录用质料,视觉动效弱,分娩周期长,研发资本高档这些有预备都不尽人意,为了惩处上述痛点,腾讯研发了一款动画斥地“神器”——“PAG”(Portable Animated Graphics),日前,PAG也负责开源到了GitHub上(https://github.com/tencent/libpag)。

接下来主要从以下几个部分先容这款神器:

时期旨趣 PAG存在的上风 PAG使用初体验

从上头3个部分张开,全部探索下“PAG”的好用之处。

时期旨趣

想要解这款神器的话,咱们得从以下几个方面来看:

为什么会有PAG

PAG当作动画的一种惩处有预备,不得不提当今业界常用的动画职责流惩处有预备:Lottie和SVGA。

Lottie 最早从UI动画场景开拔惩处矢量动画渲染的问题,从官方社区来看,咱们能容易发现 Lottie 的矢量基因,社区作品大多是矢量图形类动画。SVGA 是 YY 直播的斥地工程师 2017 年发布的一套跨平台动画惩处有预备,降生于直播场景,SVGA 不援救复杂矢量图形动画,对位图动画的援救超越 Lottie,其当先的预备是为了改善和弥补Lottie。

弗成否定,两者都是业界优化的动画惩处有预备。PAG降生于2016年,当先的原因是为了惩处更为复杂的视频裁剪场景下动画渲染问题,同期又完好遮蔽了UI动画和直播场景。

为什么要用PAG 传统收场有预备的职责流

首先,咱们来望望传统收场有预备的全体历程:假想师需要在AE中完成动效假想,进行手工规复,终末与假想师反复证明后果。如莫得此类殊效的话,需要再行斥地,直到适合预期。

PAG 的职责历程

再说到PAG的职责历程,在体验后,通盘历程归来如下:

主要历程:

由AE生成对应动画 通过AE插件,完成动画导出部分 预览图片素材 导出对应文献 运营配置后,端上渲染

不错看到,在PAG的职责历程下,许多之前需要人工配置和手工颐养的部分都简化了,告成不错在PAG桌面预览器具中做相应的素材替换预览后果,搜检性能面板定量评估性能,极大提高了动效研发的遵守。

PAG主要上风先容

PAG的主要时期上风主若是以下几个方面:

全AE特质援救 援救图层裁剪 与视频渲染无缝整合 援救劳动端渲染 文献更小等 文献更小

PAG是二进制文献纪律,袭取了动态比特位编码时期,让疏通动画导出的文献大小平均只好 Lottie 的一半驾驭(都经过zip压缩后对比)。

解码更快

PAG由于袭取二进制纪律,不存在JSON的字符串领会,解码耗时平均只好Lottie文献的7.6%,同期二进制文献纪律也更容易做到单文献集成图片,音频,视频等苟且资源,是以它的解码速率比Lottie快得好多。

援救更多AE特质

PAG援救更多的AE特质,当今援救Lottie在出动端险些扫数的功能,况兼绝顶表文本,遮罩,滤镜方面比Lottie援救愈加全面。比如一些内置的殊效。

性能更好

PAGViewer 面板不错定性的评估PAG素材的性能,如下图等于性能面板给到的放手:

对比不同的素材,咱们从渲染耗时来看,优化的时候都是Lottie的100%以上的,从内存上来看,平均优化的空间是巨大的,对于一款诳骗来说,培植弗成小觑。

接口易钦慕

首先,咱们从平台上来看:

Lottie仅援救Android、iOS、web、mac OS SVGA援救Android、iOS和web端 PAG不错援救到Android、iOS、web、mac OS、windows、Linux,涵盖到扫数平台。

PAG为好多的用户推敲到平台兼容性,真实下了好多功夫。固然了,除了上头的平台兼容外,PAG 在接口假想上也愈加容易去钦慕。 

掀开官网,都有完备的接入文档。

PAG使用初体验

接下来,我会当作零基础的用户,给公共先容下操作体验。

PAG导露面板

以假想完成的AE动效为例,装置好PAGViewer后,聘用装置AE插件,即可在AE中援救导出PAG文献。

在导出PAG文献时不错看到提供了两种形式,如下图所示:

导出插件面板和告成导出,前者加多了导出插件面板的深刻,便捷搜检AE工程中告成导出存在的问题,况兼有更丰富的乌有提醒以及相应的阅兵提出,便捷假想师快速发现和惩处问题。

同期,援救一键导出BMP预合成和搜检占位图层。

另外,由于pag动画的时长是固定的,在某些场景需要pag文献的时长或者动态变化,于是加多了时候伸缩的功能。当成就PAG的播放时长和pag文献时长不一致时,会诳骗时候伸缩。

由此可见,在PAG文献导出之前,就能在面板确保动效呈现后果,并对动效图层做出相应的预览和颐养。用UI的形式替代复杂的手工操作,提高了假想师的分娩遵守。

况兼,操工作后,界面上或者操心前次的聘用,幸免屡次访佛的操作。

PAG Viewer功能

文献结构:

掀开PAG文献,不错直觉的了解文献结构,便捷告成参看图形或参数配置。

性能检测:

PAGViewer上的Profiler性能检测面板不错很直觉地匡助假想师进行性能调优。预览贴纸时按下键盘上的P键即可呼出该面板,再次按下关闭面板。

生动的占位图替换和笔墨裁剪技艺,如下替换中间的占位图片:

替换前: 替换后:

图片

或者告成在PAG Viewer上进行笔墨裁剪:

如下图,在图层裁剪面板中点击但愿鼎新的笔墨区域,不错告成修改图层笔墨。

归来

从体验上来说,PAG有预备的出现,权贵培植了动画假想到上线的遵守,惩处了行业在动画制作这块的大量痛点问题。凭证业务场景,援救多种表情视频及动画创意,告白、游戏、视频裁剪..当今接入PAG的居品,比如QQ,微信,王者荣耀,QQ音乐等。

图片

PAG 当今已负责对外开源,如果公共对阅兵 PAG 名堂有任何的主义或提出,接待走访 PAG 的 Github 主页:https://github.com/tencent/libpag 。公共也不错加入PAG官方群(893379574)或通过他们的官网(https://pag.io/),与更多优秀的假想师和斥地人员共同体验!