实现动画方式深度解析（十九） —— Lottie - iOS动画 （一）

版本记录

版本号	时间
V1.0	2017.09.26

前言

app中好的炫的动画可以让用户耳目一新，为产品增色不少，关于动画的实现我们可以用基本动画、关键帧动画、序列帧动画以及基于CoreGraphic的动画等等，接下来这几篇我就介绍下我可以想到的几种动画绘制方法。具体Demo示例已开源到Github —— 刀客传奇，感兴趣的可以看我写的另外几篇。
1. 实现动画方式深度解析（一） —— 播放GIF动画（一）
2. 实现动画方式深度解析（二） —— 播放GIF动画之框架FLAnimatedImage的使用（二）
3. 实现动画方式深度解析（三） —— 播放序列帧动画（一）
4. 实现动画方式深度解析（四） —— QuartzCore框架（一）
5. 实现动画方式深度解析（五） —— QuartzCore框架之CoreAnimation（二）
6. 实现动画方式深度解析（六） —— Core Animation Basics（三）
7. 实现动画方式深度解析（七） —— Core Animation之Setting Up Layer Objects（四）
8. 实现动画方式深度解析（八） —— Core Animation之动画层内容 （五）
9. 实现动画方式深度解析（九） —— Core Animation之构建图层层级 （六）
10. 实现动画方式深度解析（十） —— Core Animation之高级动画技巧 （七）
11. 实现动画方式深度解析（十一） —— Core Animation之更改图层的默认行为（八）
12. 实现动画方式深度解析（十二） —— Core Animation之提高动画的性能（九）
13. 实现动画方式深度解析（十三） —— Core Animation之图层样式属性动画（十）
14. 实现动画方式深度解析（十四） —— Core Animation之 KVC 扩展（十一）
15. 实现动画方式深度解析（十五） —— Core Animation之可动画属性 （十二）
16. 实现动画方式深度解析（十六） —— Core Animation之CABasicAnimation动画示例 （十三）
17. 实现动画方式深度解析（十七） —— Core Animation之CAKeyframeAnimation动画示例 （十四）
18. 实现动画方式深度解析（十八） —— UIView动画 （一）

Lottie动画实现

Lottie是一个可以解析使用bodymovin插件从 Adobe After Effects中导出的格式为 json 的文件，并在 iOS、Android、macOS、React Native 中进行解析使用的开源库。

也就是说这个框架可以解析的是json文件，并绘制为动画，这里json文件的获取方式有两种。

• 服务端获取，这个好处就是可以动态的改变动画，很方便，客户端不用做任何修改。
• 客户端保存，这个不能随便更改，但是由于存储的json文件，所以包的大小会减小很多。

下面我们就以自己生成的json文件，并利用框架实现动画。

---

安装AE软件

Adobe After Effects CC 2017 Mac版是一款Mac平台的影视特效处理软件，Adobe After Effects CC 2017 Mac版是用于 2D/3D 合成、影片制作、影片特效、视觉效果、电影特效等视频后期处理的非线性编辑软件。全新的 After Effects CC使用业界的动画和构图标准编辑呈现电影般的视觉效果和细腻动态图形，一手掌控您的创意，并同时提供前所未见的出色性能。

我在网上找了个最新的 2017 AfterEffect CC，但是不是破解版的，只能用七天，为了验证够用了，所以可以凑合着用一下，2.19GB，网速慢的还要多下载一会。

下载完成以后需要注册Adobe ID，这里是免费试用7天，我下载的不是破解版本的。

AE界面如下所示

---

安装bodymovin插件

bodymovin是一个AE的开源的插件，我们需要先安装这个插件到AE中。下载好后文件如下所示。

bodymovin

接下来我们需要下载插件安装器工具，我这里是mac，所以选择mac版本的。

插件安装器工具网站源

这个安装器工具我下载了好几次才下载下来，超级慢，大家要有点耐心，下载好后如下所示。

下载好的样子

下面就是直接安装

---

配置及生成JSON文件

下面我们就要在AE软件中进行配置，并生成json文件。打开AE，按照下图所示进行配置。

1. 选择After Effects CC 中的preference，选择General

在弹出的界面中选择我红颜色框框圈出来的部分。

2. 选择Window->Extensions->BodyMovin

选择好后弹出下面的界面

就是在这个界面加载我在网络中下载的.ape文件。

3. 生成json文件

点击Render，开始生成json文件，这里注意，要选择好目标存储地址和文件夹，不要重名。

生成的json文件如下所示，只需要生成一个就可以，我这里随便生成了三个，但是用的时候我只用了data.json那一个格式的文件了。

打开一下，就可以详细的看到里面json文件的格式。

---

实现验证

上面我们已经获取到了json文件，下面我们就可以新建工程使用这个json文件，演示动画了。还是是直接看代码。

#import "ViewController.h"
#import "Lottie.h"

@interface ViewController ()

@end

@implementation ViewController

#pragma mark -  Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor greenColor];
    
    [self loadAnimation];
}

#pragma mark -  Object Private Function

- (void)loadAnimation
{
    LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"data.json"];
    animationView.frame = self.view.frame;
    [self.view addSubview:animationView];
    
    [animationView playWithCompletion:^(BOOL animationFinished) {
        NSLog(@"动画结束了");
    }];
}

@end

下面看一下实现效果，这个是一个动画，但是时间很短，不是很好抓，这里就给大家放一个静止图片，相关代码我已经放在Github上了。

大家可以看到，代码还是很简单的，基本上的工作都在获取json文件中，在实际工程中，我们一般是从网络获取动画。

后记

未完，待续~~~