网上有很多关于动效格式的文章，仅仅浏览一遍，是无法成为自己的东西，需要运用到工作中并总结复盘，才能真正消化成自己的东西。

以前做一些用在 app 上的小动效，例如下拉刷新、标签栏 icon 等动效，都是用的 GIF 格式，但是 GIF 有几个缺点：

①文件大

GIF 的原理是把整个动效拆分成一张一张的静态图片，按照设置的帧速率播放这些图片，通常将帧数率设置为25，就是1秒钟播放25张图片；如果这个动效的时间比较长，这个 GIF 里就会包含很多图片，图片越多， GIF 文件就越大；

②占资源

文件越大，播放时占用的资源就会越高（内存和 CPU ），容易出现卡顿；

③有锯齿

用 PS 导出带透明背景的 GIF 时，描边选择为“无”，导出的 GIF 四周就会有锯齿；描边选择有颜色，动图用在与描边颜色不同颜色的背景上就会很违和；

由于 GIF 做动效有很明显的缺点，用在 app 上的小动效用 Lottie 动画更合适。

一、动效原理

Lottie 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具，是一种基于 JSON 的动画文件格式，可以在 iOS 、 Android 、 Web 和 React Native 上使用 Lottie 文件，实时渲染 AE 动画特效。

我们使用的 AE ，底层也是通过代码运行的，我们的每一步操作都有对应的代码在实现功能。Lottie 使用的是 Bodymovin 这个插件从 AE 里导出的 JSON 文件，Bodymovin 会将我们在 AE 里所有操作，像做会议纪要一样，全部记录在 JSON 文件里，将时间轴完整地导出来，还原每一个图层从第一帧到最后一帧的所有关键帧信息。

二、交付步骤

在 AE 里安装 Bodymovin 插件（https://github.com/bodymovin/bodymovin），把做好的动效用这个插件导出为 JSON 文件。

然后让开发小哥在代码里添加 Lottie 库，就可以解析 JSON 文件并播放动效了。

iOS：https://github.com/airbnb/lottie-ios

安卓：https://github.com/airbnb/lottie-android

React Native：https://github.com/airbnb/lottie-react-native

由于 Lottie 使用的是关键帧动画描述，如果只是从A点匀速移动至B点这样简单的一次线性方程，播放起来就很顺畅；当遇到二次线性方程、贝塞尔曲线方程这些高阶插值计算的时候，可能会降低性能。

三、注意事项

1、Lottie 支持的AE效果

Lottie 在不同原生应用中所支持的 AE 效果有所差异，全部内容可以参阅官方的支持功能表。

https://airbnb.io/lottie/#/supported-features

这里列举 3 个我在工作中遇到的问题：

①渐变

在这个小动效中，有一部分图层设置了渐变填充。

Lottie 是支持 AE 的渐变的，但用 Bodymovin 从 中文版的 AE 导出的渐变会变成灰度渐变，原本的所有渐变数值都变成了从白（#FFFFFF）到黑（#000000）。

这是因为 Bodymovin 识别不出以中文命名的渐变填充，我们可以打开 Bodymovin 导出的 json 文件，能看到里面所有渐变填充对应的数值都是[0,1,1,1,1,0,0,0]，这代表的就是从黑到白的渐变。

该问题的解决办法是，将设置得有有渐变的图层内的“渐变填充1”改名为英语“gradient fill1”（如果该图层只有一个渐变，该命名也可以不加序号1），这样 Bodymovin 就能识别出以英文命名的渐变填充了。

②运动模糊

虽然官方的支持功能表里没有明确注明是否支持运动模糊效果，但有写到安卓是支持高斯模糊的。

针对某些动效，加上运动模糊效果会显得更生动。但要注意的是，用 Bodymovin 从 AE 导出的带有运动模糊的效果，只有在安卓系统上能显示。

③表达式

在制作动效的过程中，运用表达式可以让我们高效率地实现想要的效果。例如给放大动效加上回弹表达式，就可以让放大效果看起来更生动，且不用自己手动去一帧一帧调节回弹的细节。

虽然 Lottie 不支持 AE 的表达式，但我们可以在 AE 里安装 Easy Bake 插件，把用表达式生成的动效转换为关键帧。

转换之后，表达式的效果变成了一个一个的关键帧，这样就能够导出动效到 Lottie 里使用了。

2、导出图片类动效

如果动效文件中有位图，在导出之前时，需要点开设置菜单，勾选Include in json

Lottie 早期的版本是不支持图片类动画的，导出 json 之后会自动生成一个 img 的资源文件夹，播放 json 文件时，需要解压资源压缩包到本地目录才能正常播放。Bodymovin V5.1.15之后，Lottie 将图片转为 base 64 编码，使用字符代替图像地址，并封装在 json 里，就可以直接播放 json 文件而不用再拖着一个资源文件夹了。

但是转 base64 需要编译，在一定程度上会影响性能，因此不推荐用 Lottie 做位图动效。

对于位图动效，SVGA 是更适合的。

首次在工作中接触到 SVGA ，起因是需要在登录界面做一个全屏的动效，用于手机、平板、电脑端。

同样内容的位图动效， 导出三种格式比较，SVGA 文件是最小的，并且比另外两种格式小非常多。

一、动效原理

 SVGA 是由 YY UED 团队提供的一种跨平台的开源动画格式。

不同于 GIF 是由很多位图构成， SVGA 的原理是：

从 AE 文件中提取所有的图层，并将其在时间轴中每帧的参数（位移、缩放、旋转、透明度）导出，生成 SVGA 文件。因为导出的图层数量通常都不多，而且图层的属性值都是非常轻量的代码，所以生成SVGA文件的大小才会这么小。

二、交付步骤

在 AE 里安装 SVGAConverter 插件（http://svga.io/designer.html），把做好的动效用这个插件导出为 SVGA 文件。 

然后让开发小哥需要先在代码里添加一个专用的播放器 SVGA Player，就可以播放 SVGA 格式了。

http://svga.io/integrated.html

播放前，会一次性地上传所有图片到 GPU ，在播放的过程中，图片都在不断复用，大大提升了性能，并且只有很简单的位移、缩放、旋转、透明度属性，不用解析高阶插值（二次线性方程，贝塞尔曲线方程），因为导出的是每一帧，所以实际的播放过程中不会过多占用内存和 CPU ，也就不容易出现卡顿的现象。

三、注意事项

1、文件大小

SVGA 文件的大小，与动效中所包含的图片大小相关；图片越小，SVGA 文件越小。

PNG 图片的文件大小可以通过 TinyPNG 这个在线网站压缩，每次可以上传20张图片进行压缩。

https://tinypng.com

这里所指的图片大小是原始图片的大小，在AE中缩小图片或合成尺寸，导出的 SVGA 文件大小是不会有变化的。

2、内存占用大小

如果导出的 SVGA 内存占用过大，在AE中会弹出提示。

SVGA 内存占用的大小，与动效中所包含的图片的分辨率相关，减少图片中的透明像素能极大缩小所占内存。

例如下图的花瓣下落动效， 所有的花瓣都在一张图片上，这张图片就包含了大量的透明像素

同样的动效，将花瓣单独切为一张一张的图片，导出的SVGA 所占内存，比之前整整少了95%

3、SVGA的缺点

① SVGA 适合位图动画，对于过于复杂的矢量形状图层可能会出现问题；

② SVGA 对于 AE 自带的很多效果如渐变、生成、描边、擦除等等，都不支持。

Powered by Froala Editor