//图例
    legend: {undefined
        icon: "circle",
        //icon形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none,
        itemWidth: 10,  // 设置icon宽度
        itemHeight: 10, // 设置icon高度
        itemGap: 40, // 设置间距
        // top: '5%',//竖直位置
        // left: 'center',//水平位置
        x: 50,//水平位置
        y: 200,//竖直位置
        orient: "vertical",//设置显示顺序，默认水平（水平，竖直）
         textStyle: {undefined
            color: "#000"
         },//文本样式
         // 使用回调函数（设置文本显示内容，例如 加百分号）
          formatter: function(name) {undefined
            var data = option.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0, l = data.length; i < l; i++) {undefined
              total += data[i].value;
              if (data[i].name == name) {undefined
                tarValue = data[i].value;
              }
            }
            var p = ((tarValue / total) * 100).toFixed(2);
            return name + " " + " " + p + "%";
          },
    },

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

图1 传统动画实现流程图

当前最好的动画设计软件是Adobe After Effects（简称AE），从AE动画制作到终端APP呈现，传统的实现方式如图1所示，有三大痛点：实现成本高、沟通成本高和性能难以保证。

近几年，业界诞生了像Lottie、SVGA这样的动画工作流解决方案，虽然在一定程度上提升了生产效率，但存在AE支持能力有限、动画性能难以保证、配套工具支持有限的问题。

1 ：PAG解决的问题

——————————

PAG（Portable Animated Graphics）是腾讯PCG发布器中台自主研发的一套完整的动画工作流解决方案，助力于将AE动画方便快捷的应用于各平台终端。PAG的流程图如图2所示，设计师在AE上设计出动画后，可以通过导出插件导出pag文件，同时PAG提供了桌面端预览工具，支持实时预览效果，在确认效果后，通过运行配置上线，各平台终端可以通过PAG SDK加载渲染pag动画。

图2 PAG动画工作流流程图

与Lottie、SVGA相比，PAG增加支持了服务端。除此之外，如图3所示，PAG动画方案在导出动画文件大小、AE特性支持和可编辑性方面具有较大的优势。

图3 PAG和Lottie对比图

2: PAG支持的AE特性能力

——————————

2.1 矢量特性能力的支持

和Lottie、SVGA实现不同的是，PAG不依赖平台端渲染接口，可以实现各平台的渲染一致性。PAG与Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。

2.2 BMP预合成--全AE特性支持

无论是PAG还是Lottie、SVGA，所支持的AE特性仅仅是AE众多特性中的很少的一部分，这在一定程度上限制了设计师的创造力。针对这个问题，PAG新增了BMP预合成的导出方式，支持导出所有AE特性，适用于不可编辑的场景。其原理如图4所示，在合成的层面将渲染结果截取成图片，然后进行视频编码。

图 4 BMP预合成原理图

针对视频不支持透明通道而动画需要包含透明通道的问题，在编码的层面扩展了透明通道的支持，如图5所示。

图6 PAG矢量和BMP预合成混合导出

3: PAG导出插件

——————————

3.1 不支持AE特性提示

针对导出动画和AE设计动画存在偏差的问题，PAG导出插件增加了使用了不支持AE特性提醒功能，如下图7所示。

图7 PAG导出面板

在预览界面，同样有不支持特性的提示，如图8所示。

图8 PAG导出面板预览窗口

在使用AE设计动画的过程中，设计师可以方便快捷的提前查看使用了那些不支持直接导出的AE特性，换种实现方式或者导出成BMP预合成，有效的解决了设计动画和导出动画存在偏差的问题。

3.2 BMP预合成一键设置

在AE动画设计的过程中，PAG导出面板提供了一键设置BMP预合成的方法，如下图9所示。需要提示的是，一旦设置了BMP预合成，该合成中的文本和图片将不能再被用户编辑。

图9 BMP 预合成设置

由于BMP预合成可能会影响到可替换图片的数量，PAG同时会实时更新可替换图片的数量给设计以提示。

3.3 图片填充模式设置

在用pag设置的素材中，经常会遇到用户填充的图片与默认占位图尺寸不一致的情况，在导出面板中PAG增加图片填充的四个规则，如图10所示：

图10 可替换图片填充设置

其中：

不缩放：画面不缩放，从左上角位置开始裁剪

黑边：在保持高宽比的情况下缩放到设备的可用屏幕大小，图像不发生变形，如果图片尺寸和填充区域比例不一致，会出现黑边，为默认填充模式

拉伸：不保持宽高比填充，会发生失变形

裁剪：在保持高宽比的情况下缩放到完全填满可用的屏幕大小

具体效果如图11所示。

图11 图片填充效果图

4桌面预览工具PAGViewer

——————————

4.1 效果预览

PAGViewer支持桌面端预览PAG文件动画效果，如下图所示。支持查看动画文件中包含有多少个可编辑文本和可编辑图片，且支持设计师本地填充素材，实时预览填充效果，无需等待上线后才能确认真实效果。图片占位图支持填充图片或视频，如果PAG文件内置了音频文件，支持播放音频效果。具体效果如图12所示。

图12 PAG效果预览

4.2 性能检测

在pag动画实际使用的过程中，PAG经常遇到的问题是设计师辛辛苦苦设计的动画在终端上性能表现不佳，需要进行返工优化，同样的问题在使用Lottie方案时候也会存在。

除了效果预览，PAGViewer还增加了性能展示面板，可以很方便的看到pag动画的基本信息，如时长、帧率、尺寸、bmp预合成的数量，图层总数等，还有量化的性能指标，定量的评估pag文件的性能，如图13所示，方便设计师进行针对性的优化，而不需要等到上线前才会暴露性能问题。具体效果如图13所示。

图13 PAG性能展示面板

5: PAG的应用场景

目前PAG方案已经广泛应用于腾讯公司内外几十款产品中，涵盖了众多的国民级应用。

总结下来，PAG目前主要使用在以下几大场景：

5.1 UI动画

图15 UI动画场景

设计师设计出动画文件后，研发只需要替换预设的文本内容即可，并且文件体积非常小。

5.2 贴纸动画

图16 贴纸动画场景

5.3 照片/视频模板

图17 照片/视频模板场景

PAG支持将内置的图片作为占位图替换，并保留所有动画效果。因此可以将整个PAG动画设计成一个模板，把预设的占位图替换成用户选取的照片，自动套用效果生成视频。全程可以让设计师自由批量生产模板，无需研发介入。

仍然基于图片替换原理，PAG也支持将占位图替换为视频，实现视频模板功能。

5.4 智能剪辑

图18 智能剪辑场景

智能剪辑是围绕用户上传的视频内容，生成定制化的模板，模板本身是不固定的，可以从多个PAG文件组合而成，类似活字印刷。设计师可以利用这个特性，构建自己的特效组件库，然后对接AI的识别能力，根据一定规则组合得到无限数量的模板效果，可以做到一键出片。这块目前的典型应用场景是王者荣耀的周战报功能，随机生成游戏高光时刻视频。

文章来源：站酷   作者：腾讯ISUX

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

向世界知名的设计师致敬系列之二：乔纳森·伊夫,马克·纽森

向世界知名的设计师致敬系列之一: 雷蒙德·罗维,约恩·伍重,菲利普·斯达克,荣久庵宪司,亚历克斯, 亚历克斯·塞缪尔森