Lottie动画使用及原理分析

1.Lottie是什么？

Lottie是Airbnb开源的一个动画渲染库，支持多平台，包括iOS、Android、React Native以及Flutter（https://github.com/airbnb/lottie-ios）。除了官方支持的平台，更有大神实现了支持Windows、Qt、Skia以及React、Vue、Angular等平台，感兴趣的可以去github搜罗一番。

Lottie动画产生的流程如下：

整体工作流程为：
1）动效设计师使用After Effects制作动画，然后使用Bodymovin导出JSON文件，可以将JSON文件放到Bodymovin网站上运行看效果，也可以放在lottiefiles网站上运行看效果，而且lottiefiles有很多免费动画JSON资源可以下载看。
2）各个端使用对应的LottieSDK加载JSON文件，实现动画效果。

注意点：Lottie 3.0之后已经全部使用swift实现，所以如果需要使用Objective-C版本需要使用Lottie 2.5.3版本！

2.为什么使用Lottie？

Lottie出现之前：
1> 使用GIF，占用内存大，某些动画显示效果需要进行屏幕适配，安卓原生不支持GIF动画显示。
2> 使用帧动画，同样占用空间大，依然有屏幕适配的问题。
3> 原生实现组合式动画，需要写打量代码实现复杂动画效果，对技术要求比较高。

Lottie可以解决的问题：
1> 开发人员无需编写动画，只需加载
2> 多平台支持，一次设计多端使用
3> 解决设计提供的动效与实现不一致问题
4> 因为只是加载json文件，占用空间更小
5> 专业的人做专业的事，设计师安心做酷炫动画，开发者专心写逻辑

3.Lottie适用于哪些场景？

首先不是所有的动画都可以用Lottie来实现，一些通过属性动画实现的简单动画不需要Lottie实现，或者是有交互的动画Lottie实现不了。我们使用Lottie动画可以替代一些用代码实现很复杂的不带交互的动效，替代GIF动画和帧动画，具体可以使用在以下场景：

1> 启动(splash)动画：典型场景是APP logo动画的播放
2> 上下拉刷新(refresh)动画：所有APP都必备的功能，利用 Lottie可以做的更加简单酷炫
3> 加载(loading)动画：典型场景是网络请求的loading动画
4> 提示(tips)动画：典型场景是空白页的提示
5> 按钮(button)动画：典型场景如switch按钮、编辑按钮、播放按钮等按钮的动画
6> 礼物(gift)动画：典型场景是直播类APP的高级动画播放
等等。。。

4.Lottie的使用和原理

4.1 Lottie使用

如上图，首先第一步，将动效师输出的json文件以及需要的images文件添加到工程中（建议使用单独文件夹专门进行Lottie源文件的管理），导出的json文件名称默认都是data.json，需要我们根据功能重新命名。

我们先来感受一下这个json文件是个什么样，这只是一个json文件的一部分而已哦

接下来需要写代码来加载动画。

1)最简单的加载方式：

LOTAnimationView *animation = [LOTAnimationView animationNamed:@"data"];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
  // Do Something when