腾讯PAG动效工具剖析

什么是PAG？

1、配景

在终端 APP 中，动画非经常见，它可以辅助视觉制造焦点，同时也可以让用户交互更加顺滑，但动画的实现却是设计师和研发群体的一个痛点。怎样辅助设计师设计高性能炫酷的动画、怎样将设计师设计的动画正确无误的还原到终端 APP 上是业界不停探索和办理的标题。
2、简介

PAG是由腾讯推出的一套完备的动效工作流办理方案，目的是降低或消除动效相干的研发本钱，能够一键将设计师在AE中制作的动效内容导出成素材文件，并快速上线应用于几乎全部的主流平台。
设计师在 AE 上设计出动画后，可以通过导出插件导出 Pag 文件，同时可以在桌面端预览工具中及时预览效果，还可以通过桌面端举行性能检测。PAG 可以支持 Android、iOS、web、mac OS、Windows 和 Linux，涵盖了业界常用的终端平台，支持 AE 动画及时渲染、运行时编辑。
官方网站：https://pag.art/
PAG动效的特点

1、高效的文件格式

PAG动效文件采用了二进制的数据结构来存储AE动效信息。二进制数据结构能够非常方便的单文件集成任何资源，如位图、音频、视频资源等，实现单文件交付。同时二进制数据结构不须要像JSON一样处置惩罚字符串匹配标题，解码速率可以快90%以上。另外在压缩率方面，相比JSON，二进制数据结构可以跳过Key的内容，只存储Value，如许能节流大量空间。假如只做到这个程度，其实就是Protocol Buffers这种通用的二进制序列化方案的原理。为了进一步压缩数据，联合AE动效数据的特性，利用时间轴属性存在默认值和AE动效中存在大量连续整形、Float范例数据的特点，PAG采用了动态比特位压缩的技术，实现了比特位级别的存储和读取，大大减少了存储的冗余空间。
经过一系列的压缩计谋，导出雷同的 AE 动效内容，在文件解码速率和压缩率上均大幅领先于同范例方案。采用可扩展的二进制文件格式，可单文件集成包罗图片、音频等恣意设计资源。
与Lottie动画对比，可以看到雷同的动效内容平均PAG只有Lottie文件的56%巨细。假如不举行zip压缩，差距还会更大。
PAG格式规范：https://pag.art/docs/pag-spec.html

2、AE 特性全面支持

当前最好的动画设计软件是 Adobe After Effects（简称 AE），设计师使用AE软件设计动画后可以采用矢量导出，矢量导出方式优势就是文件极小，并且可以运行时编辑动效的内容。但这种方式注定无法支持全部AE特性，因为有很多的AE效果在有桌面显卡的情况下，都要走一个进度条才气预览，在移动端是没有大概做到及时渲染的。这也导致在现实的生产过程中，设计师有很多的复杂动效，都无法用矢量模式导出出来，如许会极大限制设计师的创意发挥。而传统的序列帧导出方式，运行时又无法编辑，文件也相对较大。
PAG在纯矢量导出方式上支持更多 AE 特性的同时，还引入了BMP预合成联合矢量的混合导出能力，实现支持全部 AE 特性的同时又能保持动效运行时的可编辑性。
① 矢量特性能力的支持

在纯矢量的导出模式下，无论是哪种实现方案，在浩繁的的AE特性面前，都只支持将有限的AE特性导出渲染。和 Lottie、SVGA 实现不同的是，PAG 不依靠平台端渲染接口，可以实现各平台的渲染同等性。
② BMP 预合成–全 AE 特性支持

PAG 新增了 BMP 预合成的导出方式，支持导出全部 AE 特性，适用于不可编辑的场景PAG，支持将特定图层截图导出成透明视频，实现了对于全部AE特性导出的支持。

③ 矢量和序列帧混合导出

设计师可以主动标志哪些图层使用序列帧导出，例如不须要编辑并且有复杂的动效，而须要编辑的图层继续用简单的矢量方式导出。从而实现支持全部的AE特性又能保持运行时的编辑性。
3、美满的动画工作流

通常设计师输出动效给开辟都是直接 AE 导出就给开辟了，很少去关注动效的性能标题，并且每次想要尝试不同素材动画效果时，须要在 AE 中调试输出后在去看效果，导致设计本钱浪费。
采用 PAG 举行动效设计的话，我们在 AE 中调试好输出动效后，可以直接在 PAG 桌面端举行检察，在桌面端我们可以快速替换动效中的图片素材或文案来检察效果，同时可以通过性能面板检察当前动效的性能，方便设计师举行针对性优化。
① 桌面 预览工具：PAGViewer

桌面端预览工具 PAGViewer 不但仅支持预览 PAG 文件效果，还支持编辑文本和填充占位图，无需等到上线便可预览线上效果

② AE 导出 插件：PAGExporter

设计师在 AE 中完成动效设计后，须要通过导出插件 PAGExporter 导出 PAG 文件

③ 预览可编辑：

③ 预览时性能监测

PAGViewer确保了渲染结果跟移动端完全同等，如许设计师可以直观地看到移动端的展示效果，而不须要上线来回确认。同时提供性能检测面板，帮助开辟工程师根据素材量化的性能指标举行优化。

以上各面板参数说明见：https://pag.art/docs/profiler.html
4、性能强文件小

PAG 采用了二进制的数据结构来存储动画信息。二进制数据结构能够非常方便的单文件集成任何资源，在解码速率上比 Lottie 所使用的 JSON 文本数据快几十倍，在性能方面，PAG 的及时渲染性能平均可以达到 Lottie 的 1.5 到 2.5 倍左右。
而在文件巨细上，PAG 通过利用动画文件本身的特点，获得了极高的压缩率。通过跳过大量默认值的存储，使用比特位来紧凑存储，雷同动画内容可以比同范例方案平均减少 50% 左右的文件巨细。

整体对比：

Android侧开辟接入

基本要求

• 支持 android 4.4 及以上系统
  
• 保举使用 gradle 3.0 及以上版本编译
  

社区基础版本 com.tencent.tav:libpag:4.2.41
在 root 工程目录下面修改 build.gradle 文件，增加** mavenCentral()**

1. buildscript {
2.     repositories {
3.         mavenCentral()
4.     }
5.     dependencies {
6.         classpath 'com.android.tools.build:gradle:3.2.1'
7.     }
8. }

复制代码

app 的 gradle 文件 app/build.gradle，添加 libpag 的库依靠

1. dependencies {
2.         //基础版本，如需保持最新版本，可以使用 latest.release 指代
3.         implementation 'com.tencent.tav:libpag:latest.release'
4.     }

复制代码

基础使用：

1. RelativeLayout backgroundView = findViewById(R.id.background_view);
2. PAGView pagView = new PAGView(this);
3. pagView.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
4. backgroundView.addView(pagView);
5. PAGFile pagFile1 = PAGFile.Load(getAssets(), "replacement.pag" );
6. pagView.setComposition(pagFile1);
7. pagView.setRepeatCount(0);
8. pagView.play();

复制代码

替换文本：

1. PAGFile pagFile = PAGFile.Load(getAssets(), "test2.pag" );
2. // 替换文本的代码
3. PAGText textData = pagFile.getTextData(0);
4. textData.text = "replacement test" ;
5. pagFile.replaceText(0, textData);
6. pagView.setComposition(pagFile);
7. pagView.setRepeatCount(0);
8. pagView.play();

复制代码

替换图片：

1. PAGFile pagFile1 = PAGFile.Load(getAssets(), "replacement.pag" );
2. // 替换图片
3. pagFile.replaceImage(0, createPAGImage());
4. pagView.setComposition(pagFile1);
5. pagView.setRepeatCount(0);
6. pagView.play();
8. private PAGImage createPAGImage() {
9.     AssetManager assetManager = getAssets();
10.     InputStream stream = null;
11.     try {
12.         stream = assetManager.open( "test.png" );
13.     } catch (IOException e) {
14.         e.printStackTrace();
15.     }
16.     Bitmap bitmap = BitmapFactory.decodeStream(stream);
17.     if (bitmap == null) {
18.         return  null;
19.     }
20.     return PAGImage.FromBitmap(bitmap);
21. }

复制代码

同时展示多个PAGFile：

1. pagComposition = PAGComposition.Make(width, height);
2. float itemWidth = width / 5;
3. float itemHeight = 300;
4. for (int i = 0; i < 20; i++) {
5.     pagComposition.addLayer(getPagFile(i / 5,  i % 5, i + ".pag" , itemWidth, itemHeight));
6. }
7. pagView.setComposition(pagComposition);
8. pagView.setRepeatCount(0);
9. pagView.play();

复制代码

PAGImageView使用：

1. int ids[] = {R.id.pagView1, R.id.pagView2, R.id.pagView3, R.id.pagView4, R.id.pagView5,
2.         R.id.pagView6, R.id.pagView7, R.id.pagView8, R.id.pagView9, R.id.pagView10,
3.         R.id.pagView11, R.id.pagView12, R.id.pagView13, R.id.pagView14, R.id.pagView15,
4.         R.id.pagView16, R.id.pagView17, R.id.pagView18, R.id.pagView19, R.id.pagView20,
5.         R.id.pagView21, R.id.pagView22};
6. for (int i = 0; i < ids.length; i++) {
7.     PAGImageView view = findViewById(ids[i]);
8.     view.setPath( "assets://" + (i + 1) + ".pag" );
9.     view.setRepeatCount(-1);
10.     view.play();
11. }

复制代码

PAGImageView说明：
PAG 4.2 版本开始增加了针对 UI 场景的专用播放组件 PAGImageView，可以有效绕开 PAGView GPU 及时渲染方案在 UI 场景下劣势。尤其是对 UI 列表或同一页面中同时播放多个 PAG 文件的场景，可以显著降低内存占用同时提拔渲染性能。其主要原理是充分利用了磁盘缓存，在渲染当前帧的同时，也将当前帧的渲染数据缓存到本地。单个动效文件在整个生命周期中用户只会看到一次短暂基于 GPU 及时渲染的画面，后续都是直接读取高速的磁盘缓存来出现，并且纵然重启 App 后缓存也仍旧有效。从而降低整个渲染过程中因为 GPU 及时渲染而引入的额外基础开销。另外由于 PAGImageView 跟 UI 框架之间并没有 GPU 桥接层，天然的能够高性能混合，也就无需处置惩罚任何额外的归并播放逻辑。
PAGImageView适用场景：
假如 PAGImageView 渲染的尺寸较大且 PAG 文件 时长较长，如手机全屏这种情况，会占用较大的磁盘空间做缓存，大概一个 PAG 文件 缓存下来就要几百 MB，目前磁盘缓存默认占用最大磁盘空间为 1GB，假如如许的情况较多，会不停触发清算缓存逻辑，不但不会提拔性能，反而使性能变差。
PAGImageView 适用于 UI 列表 或一个页面中含有多个小尺寸 View 的场景，这种场景下渲染的尺寸较小，一个 PAG 文件 缓存完占用的磁盘空间也就几十 MB，渲染使用的时候会不停命中缓存，从而提拔性能。其余场景我们照旧保举使用 PAGView。
更多API说明及使用方式见：https://pag.art/docs/api-instructions.html
官方Demo下载：https://pag.art/docs/pad-demo-download.html
Lottie迁徙至PAG：https://pag.art/docs/SDK-migration.html
谁在使用…

…

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。