【吐血整理】B端产品动效落地方案
针对B端产品动效落地方案
Part.1
B端科技类产品动效特点
此次主要针对B端科技类产品动效落地方案进行总结。此类产品动效设计一般以应用在大屏演示为主，动效设计特点：尺寸大、元素复杂、突出科技感，如图：
此素材来源网络
Part.2
影响动效输出的主要因素
一般情况下动效落地受三个方面的属性影响：尺寸、时间、动画复杂度
尺寸：占用系统空间越大，性能消耗也越大
时间：堆栈中图片数量越多，动画占用内存相应越大
复杂度：复杂度越高，输出效果越差，输出难度越高，对格式要求越严格
Part.3
不同动效格式间的优缺点
动效格式随着技术的进步，种类也变得丰富起来，每个格式都有自己的特点。下面就来总结下不同格式的优缺点，帮助我们更好的选择动效输出格式：
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
● 特殊效果需要转精灵图增加文件体积
Part.4
不同平台间动效落地方案
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