未来将用于动画制作。大家好，我是甜甜。我们知道，动画特效可以辅助视觉制作的焦点，引导注意力的方向。越来越受到视觉设计师的青睐，广泛应用于各种场景的开发中。动画设计工具方面，有Framer.js、Origami、交互原型类Principle、Flinto，还有Figma自带的动画演示工具。但是，对于一些视觉效果和不合逻辑的表情动画，设计师通常会使用AEFinish。遗憾的是，目前AE动画特效开发还没有完整成熟的跨平台解决方案，导致动画需求在线交付效率、交付质量、视觉效果弱、制作周期长、研发成本高等问题。满足了，为了解决以上痛点，腾讯研发了一款动画开发“神器”——“PAG”（PortableAnimatedGraphics），近日，PAG也正式开源到GitHub（https://github.com/tencent/libpag）。接下来我们主要从以下几个部分来介绍这款神器：技术原理PAG的优势PAG的初体验从以上三个部分开始，我们来探究一下“PAG”的用处。技术原理要想理解这个神器，就得从以下几个方面来看：为什么会有PAGPAG作为动画的解决方案，就不得不提到业界常用的动画工作流解决方案：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是二进制文件格式，使用动态bit-bit编码技术，使得同一动画导出的平均文件大小仅为Lottie的一半左右（zip压缩后对比）。解码更快由于PAG采用二进制格式，没有JSON字符串解析，平均解码时间仅为Lottie文件的7.6%。同时，二进制文件格式也更容易将图片、音频、视频等任何资源整合到一个文件中，因此解码速度比Lottie快很多。支持更多的AE特性PAG支持更多的AE特性，目前在移动端几乎支持Lottie的所有功能，另外还支持比Lottie更全面的文字、蒙版、滤镜。比如一些内置的特效。更好的性能PAGViewer面板可以定性评估PAG材质的性能，如下图是性能面板的结果：比较不同的材质，从渲染时间的角度我们可以看到优化时间超过100洛蒂的百分比。从内存的角度来看，平均优化空间是巨大的。对于一个应用来说，提升是不可低估的。界面易于维护首先来看平台：Lottie只支持Android、iOS、web、macOSSVGA支持Android、iOS、web端PAG可以支持Android、iOS、web、macOS、windows、和Linux，涵盖所有平台。PAG在为众多用户考虑平台兼容性方面着实下了不少功夫。当然，除了以上平台的兼容性，PAG在接口设计上也更易于维护。打开官网，里面有完整的访问文档。PAG使用初体验下面我就以零基础用户的身份给大家介绍一下操作体验。PAG导出面板以设计好的AE动效为例。安装PAGViewer后，选择安装AE插件，支持在AE中导出PAG文件。导出PAG文件时，可以看到有两种方式，如下图：导出插件面板和直接导出。前者增加了导出插件面板的展示，方便查看AE项目中直接导出的问题，并且有更丰富的错误提示和相应的改进建议，方便设计者快速发现问题并解决。同时支持一键导出BMP预合成和占位层查看。另外，由于pag动画的时长是固定的，在某些场景下需要动态改变pag文件的时长，所以增加了时间拉伸的功能。当PAG的播放持续时间与pag文件的持续时间不一致时，将应用时间拉伸。可以看到，在导出PAG文件之前，可以保证面板上动效的效果，可以对动效图层进行相应的预览和调整。用UI代替复杂的人工操作，提高了设计师的工作效率。而且，操作完成后，界面会记住上一次的选择，避免重复操作。PAGViewer功能文件结构：打开PAG文件，可以直观的了解文件结构，方便直接参考图形或参数配置。性能测试：PAGViewer上的Profiler性能测试面板可以直观地帮助设计人员进行性能调优。预览贴纸时，按键盘上的P键调出面板，再按一次关闭面板。灵活的占位图替换和文本编辑功能，替换中间的占位图如下：替换前：替换后：或直接在PAGViewer上编辑文本：如下图，在图层编辑中点击要更改的文本区域panel，可以直接修改图层文字。总结在体验上，PAG解决方案的出现显着提升了动画从设计到上线的效率，解决了行业在动画制作中的大量痛点。根据业务场景，支持多种形式的视频动漫创意、广告、游戏、视频剪辑。目前接入PAG的产品有QQ、微信、王者荣耀、QQ音乐等，PAG现已正式开源。如果您有任何改进PAG项目的想法或建议，请访问PAG的Github主页：https://github.com/tencent/libpag。你也可以加入PAG官方群（893379574）或通过他们的官网（https://pag.io/）与更多优秀的设计师和开发者一起体验！
