社区编辑申请
注册/登录
腾讯研发动画组件,以后动画制作用PAG
开发 前端
动画特效可以辅助视觉制作焦点,引导注意力的方向,越来越为广大视觉设计师青睐,并广泛应用于各类场景开发。

你好,我是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/),与更多优秀的设计师和开发人员共同体验!

 

责任编辑:姜华 来源: 天天Up
相关推荐

2022-05-11 14:48:33

腾讯云寿险民生保险

2022-05-09 11:19:12

CSS函数开源

2022-01-10 08:53:46

2022-03-10 08:24:17

Docker容器SaaS

2022-05-19 15:59:23

组件焦点鸿蒙

2022-05-24 07:51:05

测试模型测试单元测试

2022-04-30 08:43:52

Spring模块化框架

2022-03-29 11:28:24

HarmonyOS动画css

2022-04-15 14:57:57

Flex布局鸿蒙操作系统

2022-05-16 09:34:17

Python可视化图表

2022-04-18 16:25:17

办公软件钉钉飞书

2022-04-24 14:56:53

容器组件StackTS

2022-03-18 16:07:04

Graphic子系统鸿蒙

2022-04-21 10:49:30

智慧城市物联网

2022-03-14 18:34:07

腾讯云数仓建模大数据

2022-04-19 11:23:26

release3.1子系统鸿蒙

2022-05-13 09:27:55

Widget机票业务App

2022-04-17 23:09:07

深度学习人工智能芯片

2022-04-01 15:02:56

前端工具开发

2022-05-11 13:55:18

高可用性分布式弹性

同话题下的热门内容

让程序员心动的11种新编程语言Flutter vs ReactJS:2022年应该选哪个?前端配置化真香~上班又多了60%的摸鱼时间再有人问你什么是分库分表,直接把这篇文章发给他2022年值得使用的 Node.js 框架HTTP 的缓存为什么这么设计?前端监控的搭建步骤,别再一头雾水了!如何加快Java中大型集合的处理

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!牛人5次面试腾讯不成功的经验HBase原理–所有Region切分的细节都在这里了Javascript如何监听页面刷新和关闭事件如何搭建一个HTTPS服务端
我收藏的内容
点赞
收藏

51CTO技术栈公众号