此次主要针对B端科技类产品动效落地方案进行总结。此类产品动效设计一般以应用在大屏演示为主，动效设计特点：尺寸大、元素复杂、突出科技感，如图：

此素材来源网络

一般情况下动效落地受三个方面的属性影响：尺寸、时间、动画复杂度

尺寸：占用系统空间越大，性能消耗也越大

时间：堆栈中图片数量越多，动画占用内存相应越大

复杂度：复杂度越高，输出效果越差，输出难度越高，对格式要求越严格

动效格式随着技术的进步，种类也变得丰富起来，每个格式都有自己的特点。下面就来总结下不同格式的优缺点，帮助我们更好的选择动效输出格式：

1. 视频格式

视频格式是动画展示的鼻祖，最常见的就是网站 Banner 宣传视频，可以完美还原视觉效果，色彩不会被压缩。但文件体积大、形式单一、带宽要求高

QQ 国际版官网

优点：

● 高端大气、视觉冲击力强、被取代性弱

● 对品牌理念的传播更直观、立体、生动

缺点：

●带宽要求高，加载速度慢，体验不友好

●制作成本高，迭代周期长

2. GIF格式

应该是使用范围最广，设计师接触最多的格式了。自1987年由 CompuServe 公司引入后，因体积小成像相对清晰，适合于初期慢速的互联网，从此大受欢迎

GIF 非透明与透明背景对比

从上图可以清楚的看出，GIF 对于半透明效果输出有明显锯齿感和白色描边。造成这一现象的主要原因是 GIF 输出的是 PNG8图片格式 ，色彩模式最多256色，此格式对于透明通道不支持

PNG8  8位色彩模式2进制：2*8=256

优点：

● 支持所有主流系统 兼容性强（稳定性高）

● 文件体积较小

缺点：

●内存占用大（受时间和尺寸的因素）

●有损压缩（对色彩和品质都会压缩）

● 透明度支持有限，有锯齿和白边

3. PNG序列/精灵图

使用PNG序列帧还原动态效果，也是设计师为保障视觉效果而常使用的一种方式，因为文件格式支持24/32位通道，同时支持透明通道，对于色彩还原有着显著优势。精灵图与PNG序列的区别在于，PNG是单帧存在，而精灵图是将PNG序列合并在一张画布上显示

          PNG序列                         精灵图/雪碧图

使用PNG序列来实现动态效果，需要后台对每一张序列都进行调取，而精灵图只需要调取一次，然后控制显示区域即可节省性能消耗，但制作成本高

后台对 PNG 序列与雪碧图的访问逻辑

优点：

● 支持所有主流系统，兼容性强（稳定性高）

● 无损压缩

● 色彩通道支持24/32，透明度效果完美还原

缺点：

●文件总体积过大

●静态属性，需研发二次加载实现动效

4. Lottie工具 （Json格式）

Lottie 是近两年在动画输出中一个非常普遍应用的格式，他的原理是把我们AE项目中的矢量元素、位图图层以及他们的效果以关键节点打包的形式输出成一个 Json 格式的文件提供给研发，研发将文件加载在程序内就可以显示已经制作好的动画效果

Lottie 及AE输出插件 Bodymovin

但是对于Json文件的使用来说，想要程序正常显示效果，研发需使用第三方动效库来解析文件，这会造成稳定性降低，同时系统性能消耗增加

JSON 文件输出流程

优点：

● 方便开发，只需代码加载文件

● Android、iOS、Web多平台支持

● 矢量风格动画实现完美

● 文件体积小

缺点：

●必须加载第三方库，容易导致bug

● 对缓动解析能力差，仅支持部分AE属性

● 位图素材对系统性能消耗严重

● 渐变属性只支持Web

5. SVGA

SVGA 是一种跨平台的开源动画格式，同时兼容 IOS 、Android 、 Web，不管是文件输出之后的内存占用，还是在各个平台的表现，稳定性都好很多。但是他的文件体积会比Lottie略高，支持的AE属性也比Lottie少一些

SVGA 插件输出效果

SVGA与Lottie同样作为开源动画格式，他们之间最主要的区别在于：SVGA文件可直接使用不需要第三方动效库加载，同时SVGA对于AE属性是每一帧都在记录，无需补间转换，稳定性更高

相比Lottie优点：

● 更稳定

● 对位图支持效果好

● 同一素材可复用而非复制

相比Lottie缺点：

● AE属性支持少

6. AE2CSS（By Bigxixi）

AE2CSS可以帮助我们把所有的 AE 动画效果导出 CSS 格式加精灵图，并提供html文档，研发可直接使用导出代码，理论上这个插件可以支持我们所有的 AE 动画效果，在大多数情况下动画的质量较高占用内存比所见即所得格式要小，但是只支持WEB和H5页面

AE2CSS 插件与输出文件

使用AE2CSS来输出动画效果需要进行逻辑梳理，即可输出代码部分与不可输出部分，不可输出部分转换为精灵图显示

AE2CSS 逻辑：CSS输出基本属性 + CSS控制精灵图

优点：

● 直接输出html文件，方便研发合成

● AE效果支持最全（转换成精灵图）

缺点：

●只支持WEB和H5

● 特殊效果需要转精灵图增加文件体积

WEB/H5

以本公司产品为例，动画效果多以大屏展示为主。此类动态效果视觉要求：可视区域较大、动效实现属性复杂、元素多样、加载时间要求短等特点。结合以上几个特点 AE2CSS（By Bigxixi）的动效实现方案更符合要求

大屏项目演示

1. 动态素材分解，将位图元素（不能输出代码）与适量元素  (可输出代码）区分，减小文件大小

素材分解

2. 对分层后的素材使用插件 BX_AE2CSS 分别对图层进行 CSS与精灵图标记

标记导出

3. 压缩精灵图，减少文件体积，推荐PPDuck

精灵图文件压缩

IOS/Android

移动端动效落地推荐 SVGA，主要原因有三点：

● 相比Gif与Png序列 SVGA文件更小  
●相比Lottie文件 SVGA格式性能更稳定
● SVGA位图素材可复用，降低文件大小（纯矢量格式Lottie也可考虑） 

移动端 SVGA 动效落地案列

1.将图片或序列帧导入AE，并且进行最后动态效果制作

AE 处理最后动态效果

2. 将处理好的动效使用插件导出SVGA文件

导出并检查

文：binzai