营销动效怎么落地｜用PAG动效，支持输出3D图层！

营销动效怎么落地｜用PAG动效，支持输出3D图层！-经验/观点-UICN用户体验设计平台

一、引言：

抽奖活动作为一种互联网产品常用营销手段，其视觉形式更是五花八门：转盘、抽签、翻牌子、老虎机…无论是哪种套路，都需要设计师做好其中的动效设计，以达到吸引用户参与，提高点击和转化的活动目的。

把抽奖活动的视觉设计做得更逼真更精美，是每一位有职业理想的UI设计师或运营设计师追求的目标之一。

笔者也在积极尝试设计新的抽奖活动。丰富自家产品活动形式的同时，也可以提高个人的设计能力。当笔者怀揣着这一理想，将设计从简单的2D平面如转盘、开红包等类型，进阶至3D形式如翻牌子、老虎机（滚动式），却遇到了障碍——目前世面主流的动效落地方案，包括Lottie、SVGA、Apng，并不支持矢量3D动效。

设计师们遇到“翻转”形式的设计，要么将本是矢量替换层的动效预设为序列帧，最后再将奖品叠加上去，要么用边角定位、拉伸、叠加投影等方式结合起来，将矢量替换层通过2D视觉营造的方式“实现”3D效果。先不说设计师们处理起来增加了很多工作量，这些方式更像是“视觉欺骗”，真实感欠缺，用户投入感也被大打折扣。

笔者此前做了一个滚动抽奖的老虎机设计，就因为Lottie、SVGA不支持3D图层输出，最后不得不改为使用2D长图进行位移运动，不仅工作量增加，原本3D的翻折效果也丢了。

二、遇见PAG：

笔者在搜索各种解决办法时，发现一款号称“全AE功能支持”的动效方案——PAG动效，官方说明PAG能够一键将设计师在AE中制作的动效内容导出成素材文件，并快速上线应用于几乎所有的主流平台。目标是降低或消除动效相关的研发成本。但对笔者来说，更关键的一点是：PAG支持3D矢量动效！

按照PAG的文档对“兔兔机”工程进行修改和调整，果然成功输出了想要的动效。下面附上这一过程的发现和收获。

三、使用PAG：

1、安装流程简单顺畅

访问PAG官网即可免费下载PAGViewer，提供MacOS和Windows两种不同操作系统的程序。笔者用的是MacOS，整个安装流程都很顺畅，和大多数正版app无异。

首次打开PAGViewer，会自动提示安装PAG for AE的插件，也是一键即可完成安装。

2、详细的设计师文档

PAG官网对其支持的AE能力进行了详细地说明，对各种能力进行了分类，设计师可以快速找到对应效果是否被支持。此外，PAG还提供了设计师操作文档，包括软件安装、导出面板、预览工具、性能优化和视频教程，方便设计师快速上手PAG动效。

笔者在浏览文档的过程中，特别关注到了一点：设计师可根据PAG支持的能力对自己的工程进行调整和优化，以确保占位图或视频能够矢量输出对应的动效效果，若工程中使用了PAG不支持的AE特性或插件效果，可将对应图层和效果进行_bmp预合成，转为序列帧动画，以实现全AE功能的支持。

于是笔者对“兔兔机”的工程进行调整，主要是将使用了表达式的图层、不需要可编辑的图层进行_bmp后缀的预合成；占位图层使用了表达式，将表达式转化为关键帧。

3、详尽的插件面板

调整完成后，点击文件-导出-PAG File (Panel)，打开导出面板，可以看到其中的功能：

①优化建议：提示可编辑图层使用了不被支持的AE特性，或是其他优化建议（例如图中建议相邻2个_bmp合成为1个，以提高渲染性能）；

②常规功能：修改储存路径、多选导出；

③文件预览：点击“眼睛”图标进行文件预览；

④音频导出：勾选“同时导出音频”可将音频添加至PAG文件中；

⑤打开设置面板：点击“齿轮”图标可打开设置面板。

设置面板中：

①合成：可以查看_bmp合成信息，或将还未进行_bmp后缀的合成勾选为bmp图层再导出；

②占位图层：查看占位图层信息，修改填充和替换形式；

③时间伸缩：素材持续时长修改；

④文本图层：查看文本图层信息，可编辑性修改。

4、全AE功能支持

笔者熟悉了PAG插件面板之后，尝试输出PAG文件，顺利地导出了这个之前因动效方案不支持而弃用的3D素材，PAG号称全AE功能支持果然诚不欺我！

原来，PAG支持纯矢量导出、BMP预合成导出以及BMP+矢量混合导出：

①纯矢量导出：运行性能更优，且适合素材内容可编辑的设计；

②BMP预合成导出：可理解为将合成转化为序列帧动画，以此实现AE全特性支持；

③矢量+BMP混合导出：结合了矢量图层可编辑和BMP图层支持全AE特性的两大特点，设计师可以据此完成各类互联网产品动效的落地。

5、运行时可编辑

PAGViewer运行时可编辑，支持修改文本和替换占位图，设计师在本地填充素材预览，无需等到上线后才能确认真实的效果。

6、性能提示

PAG在桌面预览工具 PAGViewer 上增加了性能检测的功能，可以让设计师很方便地看到PAG文件的基本信息，还有量化的性能指标，定量地评估该文件的性能，以可视化的方式感知素材性能状态，方便设计师进行针对性的优化，而不需要依赖研发上线测试性能状态，极大减少了素材优化的返工耗时。

7、文件极小

顺带一提，“兔兔机”案例导出的pag文件仅1M大小，居然比原本的png图片还要小（png占7.4M，2732*2048），如此高效率的压缩，若植入在互联网产品，对于提高素材加载速度，优势明显。

四、场景探索

笔者在“追波”dribbble上看了一些酷炫灵动的UI动效设计，由于PAG支持3D矢量动画、AE全特性，如果这些设计师所在团队接入了PAG动效，他们的设计都将得以落地使用，不再是设计师炫技的概念性设计，可以极大地提高产品的视觉表现。

五、总结：

学习成本低，使用体验顺畅，全AE功能支持，完善的工具链，性能表现好...PAG动效一系列的优点，使其非常适合作为互联网产品的动效落地方案。不仅给设计师提供很多便利的同时，PAG团队甚至还在Github中撰写了详细的研发接入文档，供工程师学习和接入PAG SDK。如果你的团队正在烦恼动效落地，不妨试着引入PAG作为解决方案，开源版免费使用～