告别帧动画，Airbnb Lottie 动效库

随着 APP 上的动效设计日趋流行，对设计师和开发者们来说，复杂动效的还原成了问题，用帧序列实现倒也简单，缺点是资源图过大，内存消耗大；用代码实现，费时，逐帧调试动效节奏相当耗费精力。

现在，业界良心 Airbnb 为大家提供了一个完美的解决方案——Lottie。

设计师们在 AE 里设计好动效（以合成为单位），通过 Bodymovin 插件导出动效合成的 json 文件，Lottie 能跨平台解析该 json 文件。测试了一轮，程序猿们像使用静态切图一样展示动效，iOS、Android，Web，React Native 基本上能做到 100% 还原度，且流畅度相当好（纯 SVG 动效）。

官方示例：

设计师们如何使用？

1.安装 Adobe After Effect for Mac

暂未测试最低支持的 AE 版本

2.下载 Bodymovin 插件

3.下载 ZXP Installer

4.安装 Bodymovin

4.1 在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件

4.2 打开 ZXP Installer

4.2 将 bodymovin.zxp 拖拽进 ZXP Installer

4.3 安装完成

5.AE 首选项设置

打开AE，点击“编辑”>“首选项”>“常规”菜单项，选中“允许脚本写入文件和访问网络”，点击确定。

6.导出动效 json 文件

6.1 将需要导出的动效放置在某个合成里，导出需要以合成为单位

6.2 点击“窗口”>“扩展”>“Bodymovin”菜单项

6.3 选中所需导出的合成（合成过多的还可以搜索哦）。设置好json文件导出路径，点击“Render”

6.4 完成，把 json 发给开发小哥吧，就想你平时发切图那样

注意：如果动效包含切图文件，需要同时将切图给开发，文件名保持制作动效时的文件名

开发者们如何使用？

iOS原生，通过Airbnb的开源项目“lottie-ios”实现；

Android原生，通过Airbnb的开源项目“lottie-android”实现；

React Native，通过Airbnb的开源项目“lottie-react-native”实现；

Web页面，以svg/canvas/html+js的形式。Bodymovin自己的js库——bodymovin.js；

已知的问题

iOS7及以下 iOS 版本无法完全还原

部分 AE 效果 Bodymovin 暂不支持

可支持的 AE 效果

虽然当前所支持的效果有限，不过基本能满足一般设计师的大部分需求，动效制作时请务必检查当前所支持的效果哦：

预合成[Pre-composition]

关键帧插值[Keyframe Interpolation]

```
线性插值[Linear Interpolation]
```

贝塞尔曲线插值[Bezier Interpolation]

```
定格插值[Hold Interpolation]
```
```
漂浮穿梭时间[Rove Across Time]
```
```
空间贝塞尔曲线[Spatial Bezier]
```

固态层[Solids]

```
锚点变换[Transform Anchor Point]
```
```
位置变换[Transform Position]
```
```
缩放变换[Transform Scale]
```
```
旋转变换[Transform Rotation]
```
```
不透明度变换[Transform Opacity]
```

蒙版[Masks]

```
蒙版路径[Path]
```
```
蒙版不透明度[Opacity]
```

多蒙版混合模式（相加、相减、反转）[Multiple Masks (additive, subtractive, inverted)]

轨道遮罩[Track Mattes]

```
Alpha 遮罩[Alpha Matte]
```

父级[Parenting]

```
多个父级[Multiple Parenting]
```
```
空对象[Nulls]
```

形状图层[Shape Layers]

矩形（所有属性）[Rectangle (All properties)]

椭圆（所有属性）[Ellipse (All properties)]

多边星形（所有属性）[Polystar (All properties)]

多边形（所有属性。点个数必须为整数。）[Polygon (All properties. Integer point values only.)]

路径变换（所有属性）[Path (All properties)]

```
锚点变换[Anchor Point]
```
```
位置变换[Position]
```
```
缩放变换[Scale]
```
```
旋转变换[Rotation]
```
```
不透明度[Opacity]
```

形状组变换（锚点、位置、缩放……）[Group Transforms (Anchor point, position, scale etc)]

一个形状组可包含多个形状 [Multiple paths in one group]

合并路径（默认是关闭的，必须用enableMergePathsForKitKatAndAbove方法专门开启）[Merge paths (off by default and must be explicitly enabled with enableMergePathsForKitKatAndAbove)]

形状图层描边 [Stroke (shape layer)]

```
描边颜色[Stroke Color]
```
```
描边不透明度[Stroke Opacity]
```
```
描边宽度[Stroke Width]
```
```
描边端点[Line Cap]
```
```
虚线[Dashes]
```

形状图层填充[Fill (shape layer)]

```
填充颜色[Fill Color]
```
```
填充不透明度[Fill Opacity]
```

修剪路径[Trim Paths (shape layer)]

```
修剪路径开始[Trim Paths Start]
```
```
修剪路径结束[Trim Paths End]
```
```
修剪路径偏移[Trim Paths Offset]
```

引用：

1.大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画

2.Lottie-Android项目说明中文翻译

3.Introducing Lottie