腾讯PAG动效工具剖析
什么是PAG？1、配景
https://img-blog.csdnimg.cn/img_convert/cd26f40dae6dfa37bb99b95a44d3a388.webp?x-oss-process=image/format,png
在终端 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
https://img-blog.csdnimg.cn/img_convert/60b1ee47d6d3666818061abdd5d1f20c.pnghttps://img-blog.csdnimg.cn/img_convert/d7cada52bd40aeab32a1fa6794505513.png
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特性导出的支持。
https://img-blog.csdnimg.cn/img_convert/7b0bdbffde8db0af8590bf5223d24098.png
③ 矢量和序列帧混合导出
设计师可以主动标志哪些图层使用序列帧导出，例如不须要编辑并且有复杂的动效，而须要编辑的图层继续用简单的矢量方式导出。从而实现支持全部的AE特性又能保持运行时的编辑性。
3、美满的动画工作流
https://img-blog.csdnimg.cn/img_convert/f74bddf5f928d2c6dd1aa6acb26b7f33.png
通常设计师输出动效给开辟都是直接 AE 导出就给开辟了，很少去关注动效的性能标题，并且每次想要尝试不同素材动画效果时，须要在 AE 中调试输出后在去看效果，导致设计本钱浪费。
采用 PAG 举行动效设计的话，我们在 AE 中调试好输出动效后，可以直接在 PAG 桌面端举行检察，在桌面端我们可以快速替换动效中的图片素材或文案来检察效果，同时可以通过性能面板检察当前动效的性能，方便设计师举行针对性优化。
① 桌面 预览工具：PAGViewer
桌面端预览工具 PAGViewer 不但仅支持预览 PAG 文件效果，还支持编辑文本和填充占位图，无需等到上线便可预览线上效果
https://img-blog.csdnimg.cn/img_convert/4f573904ad43e9e19c7aa1ad75162664.png
② AE 导出 插件：PAGExporter
设计师在 AE 中完成动效设计后，须要通过导出插件 PAGExporter 导出 PAG 文件
https://img-blog.csdnimg.cn/img_convert/4b59a64238f22d24c71fec414386c119.pnghttps://img-blog.csdnimg.cn/img_convert/1ce9f74d78b8b451d198747a97a331b9.png
③ 预览可编辑：
https://img-blog.csdnimg.cn/img_convert/572ab987921bfbf6496eb072e86e223a.gif
③ 预览时性能监测
PAGViewer确保了渲染结果跟移动端完全同等，如许设计师可以直观地看到移动端的展示效果，而不须要上线来回确认。同时提供性能检测面板，帮助开辟工程师根据素材量化的性能指标举行优化。
https://img-blog.csdnimg.cn/img_convert/f3f54660e54f8ef837ecc334ecb66c6d.png
以上各面板参数说明见：https://pag.art/docs/profiler.html
4、性能强文件小
PAG 采用了二进制的数据结构来存储动画信息。二进制数据结构能够非常方便的单文件集成任何资源，在解码速率上比 Lottie 所使用的 JSON 文本数据快几十倍，在性能方面，PAG 的及时渲染性能平均可以达到 Lottie 的 1.5 到 2.5 倍左右。
而在文件巨细上，PAG 通过利用动画文件本身的特点，获得了极高的压缩率。通过跳过大量默认值的存储，使用比特位来紧凑存储，雷同动画内容可以比同范例方案平均减少 50% 左右的文件巨细。
https://img-blog.csdnimg.cn/img_convert/b2a5c21bd24f3d53d83c1a37f7cf39c0.png
整体对比：
https://img-blog.csdnimg.cn/img_convert/455a979b0ff6c2b7feb84447fecdae60.png
Android侧开辟接入
基本要求
[*]支持 android 4.4 及以上系统
[*]保举使用 gradle 3.0 及以上版本编译
社区基础版本 com.tencent.tav:libpag:4.2.41
在 root 工程目录下面修改 build.gradle 文件，增加** mavenCentral()**
buildscript {
repositories {
mavenCentral()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.2.1'
}
}
app 的 gradle 文件 app/build.gradle，添加 libpag 的库依靠
dependencies {
//基础版本，如需保持最新版本，可以使用 latest.release 指代
implementation 'com.tencent.tav:libpag:latest.release'
}
基础使用：
RelativeLayout backgroundView = findViewById(R.id.background_view);
PAGView pagView = new PAGView(this);
pagView.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
backgroundView.addView(pagView);
PAGFile pagFile1 = PAGFile.Load(getAssets(), "replacement.pag" );
pagView.setComposition(pagFile1);
pagView.setRepeatCount(0);
pagView.play();
替换文本：
PAGFile pagFile = PAGFile.Load(getAssets(), "test2.pag" );
// 替换文本的代码
PAGText textData = pagFile.getTextData(0);
textData.text = "replacement test" ;
pagFile.replaceText(0, textData);
pagView.setComposition(pagFile);
pagView.setRepeatCount(0);
pagView.play();
替换图片：
PAGFile pagFile1 = PAGFile.Load(getAssets(), "replacement.pag" );
// 替换图片
pagFile.replaceImage(0, createPAGImage());
pagView.setComposition(pagFile1);
pagView.setRepeatCount(0);
pagView.play();
private PAGImage createPAGImage() {
AssetManager assetManager = getAssets();
InputStream stream = null;
try {
stream = assetManager.open( "test.png" );
} catch (IOException e) {
e.printStackTrace();
}
Bitmap bitmap = BitmapFactory.decodeStream(stream);
if (bitmap == null) {
returnnull;
}
return PAGImage.FromBitmap(bitmap);
}
同时展示多个PAGFile：
pagComposition = PAGComposition.Make(width, height);
float itemWidth = width / 5;
float itemHeight = 300;
for (int i = 0; i < 20; i++) {
pagComposition.addLayer(getPagFile(i / 5,i % 5, i + ".pag" , itemWidth, itemHeight));
}
pagView.setComposition(pagComposition);
pagView.setRepeatCount(0);
pagView.play();
PAGImageView使用：
int ids[] = {R.id.pagView1, R.id.pagView2, R.id.pagView3, R.id.pagView4, R.id.pagView5,
R.id.pagView6, R.id.pagView7, R.id.pagView8, R.id.pagView9, R.id.pagView10,
R.id.pagView11, R.id.pagView12, R.id.pagView13, R.id.pagView14, R.id.pagView15,
R.id.pagView16, R.id.pagView17, R.id.pagView18, R.id.pagView19, R.id.pagView20,
R.id.pagView21, R.id.pagView22};
for (int i = 0; i < ids.length; i++) {
PAGImageView view = findViewById(ids);
view.setPath( "assets://" + (i + 1) + ".pag" );
view.setRepeatCount(-1);
view.play();
}
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
谁在使用…
https://img-blog.csdnimg.cn/img_convert/945aee31c9059a7a08014d0803941a53.png
…
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]