Lottie——开启UI动画新时代

一、前言

还记得第一次进入 iOS7 主界面时候，应用图标顺序落下的动画，深深地惊艳了我，于是一次次的锁屏、解锁，尽情地体验其 UI 动画的优美。也记得第一次使用 Twitter 客户端时被其启动动画、自定义 Modal 动画深深的吸引，连 Tabbar 上的按钮在点击之后的跳动反馈，也让我一次次地点到不能自拔。不得不说，不论性能和用户体验等而单论 UI 和动画的优美的话，Twitter 客户端无疑是我所见过的最棒的应用了。至于 Facebook、Line 以及国内的微信、QQ、微博等应用，我觉得与之相形见绌，尤其是 Facebook 的客户端，聊天功能竟然需要跳转到另外一个应用之内，简直是反人类的设计。OK，吐槽结束，进入正题。

随着移动互联网的发展，一个优秀的应用，除了实现该有的功能之外，有着美观的界面以及优雅的动画也将成为越来越重要的一环。原因之一，移动端设备性能不断提升，已经开始出现性能过剩的现象，加入适当的 UI 动画是对硬件资源的合理利用；此外，随着用户对 UI 的审美日益提升，良好的 UI 动画将更容易黏住用户。

但一直以来，没有一套简洁高效的方式来实现复杂的动画，于是平面设计师不能充分发挥自己的构想，还得与程序员进行毫无意义的争执和妥协。不过这样的情况可能会得到显著改善，这得益于一个革命性的开源动画库——Lottie。它架起了设计和代码的新一代桥梁，足以开启 UI 动画的新时代。

二、Lottie 简介

Lottie 是一个支持 iOS、Android 以及 React Native 的第三方开源库，可以在原生应用中实时渲染After Effects（ Adobe 公司推出的一款非线性视频编辑软件，可用于2D和3D的动画及特效合成，下文中简称 AE ）中导出的动画，并且在开发中使用这些复杂且华丽的动画就像使用静态图一样简单和高效。

这是一个使用 Lottie 渲染的 AE 形状动画：

以下是 Lottie 官方的一些 demo：

在过去，为 iOS、Android 以及 React Native 的应用构建复杂动画是一件相当困难且繁杂的工作。你要么需要为不同尺寸的屏幕添加大量的图片，要么写大量的难以维护的代码。因此，大部分的应用都是几乎不使用复杂动画的。在今天，Lottie 可以改变这种现状。使用一款叫做 Bodymovin 的 AE 插件，可以将 AE 中较易实现的复杂动画数据导出为 json 文件。这个插件内嵌了JavaScript 播放器，可以在 Web 端渲染动画。而 Lottie 在其基础上将其扩展到了移动端。Lottie 使程序员不必费尽心思地去重写复杂的动画，而是直接使用设计师所设计的动画本身。

目前 Lottie 的替代选项有以下几种：

1. 纯代码写动画。纯代码写动画是一项极其耗时的工作，某些动画甚至是纯代码所无法实现的。
2. Facebook 的 Keyframes。Keyframes专注于交互，但支持的 AE 特性相当少。
3. Squall。Squall 成为了 Lottie 工作流的一部分，但是它仅支持 iOS 平台。
4. Gif。Gif 动态图比 json 文件 要大至少两倍，并且 Gif 是位图不是矢量图，无法放大（直接改变图像大小会变模糊，不是真正意义的放大）来适应大尺寸的屏幕。
5. Png 序列帧动画。Png 序列比 Gif 还要大得多，而且同样也无法实现放大。

而 Lottie 则具有以下优势：

1. 跨平台。支持 iOS、Android 以及 React Native 三个平台。
2. 支持大量的 AE 特性。支持固态层、形状、遮罩、Alpha蒙版、路径等，并且会逐渐加入更多的特性。
3. 可以随心所欲地操作你的动画。你可以往前、往后调节你的动画的进度，甚至支持在动画过程中进行界面交互。
4. 更小的文件尺寸。Lottie 将轻巧的 json 解析为矢量动画，使你不必担心文件的尺寸会过大。

此外，Lottie 团队将致力于支持尽可能多的 AE 特性。而且 Lottie 有一些内置于其 API 的特性使其更加通用和高效。它支持从网络加载 json 文件，并且内置 LRU 缓存机制。Lottie 可以极方便地对动画进度和动画速率进行控制，iOS 平台下甚至支持在运行时给动画添加额外的原生控件，这可以用来实现更加复杂的转场动画。

三、Lottie 的使用

1. 安装 AE。可以网上搜索破解版仅供学习使用，最好使用官网正版。具体安装过程略去不表。

2. 安装 Bodymovin 插件。下载Bodymovin 的 zip 文件，解压并找到 '/build/extension' 目录下的 .zxp 文件，然后使用ZXP install 进行安装即可。

3. 进入 After Effects > Preferences > General 并在 "Allow Scripts to Write Files and Access Network" 前面打钩，即可开始使用 Bodymovin。

4. 打开 AE 工程文件并选择 Window > Extensions > bodymovin，将会出现 bodymovin 的面板。点击 Refresh 可以刷新合成列表。选择你想要导出的合成，设置好导出文件夹，点击 Render 即可导出记录该合成的 json 文件。如果你在动画中有用到图片或者 AI layer ，这些文件将会被导出到一个文件夹之中。

5. 新建一个项目，用 CocoaPods 导入第三方库 Lottie（注意一定要是最新版，支持的 AE 特性比较多）。Lottie 支持 iOS8 及以上系统。Lottie 动画可以从 Bundle 或者网络加载，Bundle json 的话只需要拖到相应 target 中即可。最简单的一个使用例如下：

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

如果你使用了多个 Bundle 则可以用以下方法：

LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie" inBundle:[NSBundle YOUR_BUNDLE]];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
  // Do Something
}];

或者你可以从 NSURL 加载数据：

LOTAnimationView *animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
[self.view addSubview:animation];

Lottie 支持 iOS UIViewContentModes 中的 aspectFit，aspectFill 和 scaleFill。

你可以交互式地设置动画进度：

CGPoint translation = [gesture getTranslationInView:self.view];
CGFloat progress = translation.y / self.view.bounds.size.height;
animationView.animationProgress = progress;

想要用任意的 View 对 LottieView 的动画层进行遮罩？只需要知道 AE 中对应层的名字就 ok：

UIView *snapshot = [self.view snapshotViewAfterScreenUpdates:YES];
[lottieAnimation addSubview:snapshot toLayerNamed:@"AfterEffectsLayerName"];

Lottie 带有一个继承自 UIViewController 的动画控制器，这可以用来做自定义转场动画：

- (id)animationControllerForPresentedController:(UIViewController *)presented
                                                                  presentingController:(UIViewController *)presenting
                                                                      sourceController:(UIViewController *)source {
  LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
                                                                                                          fromLayerNamed:@"outLayer"
                                                                                                            toLayerNamed:@"inLayer"];
  return animationController;
}

- (id)animationControllerForDismissedController:(UIViewController *)dismissed {
  LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition2"
                                                                                                          fromLayerNamed:@"outLayer"
                                                                                                            toLayerNamed:@"inLayer"];
  return animationController;
}

LOTAnimationView 有一个内建的 LRU 缓存策略，以满足你的动画会被经常重用的情况。

Lottie 也可以在 Swift 中使用！如下：

let animationView = LOTAnimationView.animationNamed("hamburger")
self.view.addSubview(animationView!)

animationView?.play(completion: { (finished) in
  // Do Something
})

四、局限性

Lottie 是基于 Bodymovin 的，Bodymovin 的 AE 特性支持列表如下：

1. 支持预合成、形状、固态层、图片、空对象以及文本
2. 支持遮罩和反转遮罩，但是这相当影响性能
3. 支持时间重置（time remapping）
4. 目前只支持滑块特效
5. 支持 AE 表达式
6. 不支持图片序列、视频和音频！
7. 不支持图像拉伸！

Lottie 必然无法支持 Bodymovin 尚不支持的 AE 特性，如此之外，目前还具有以下局限性：

1. 不支持奇偶混合路径
2. 不支持混合形状
3. 不支持形状裁剪
4. 不支持表达式
5. 不支持3D层
6. 不支持渐变
7. 不支持星星形状
8. 不支持 Alpha 反转遮罩
9. 不支持大部分的 AE 特效，存在诸多 bug

尽管如此，目前 Lottie 用来实现一般的控件动画或者转场动画已经绰绰有余了。

五、实践

我在这里使用一个静止系 MAD 的 AE 工程文件直接渲染出 json 文件，用 Lottie 在 Xcode 中解析该动画，发现 Lottie 虽然无法完美重现 AE 中的好多细节，不过基本的实现已经相当可以了，而且很有开发的潜力。

实现单纯的一段形状动画是很完美的，而且内存占用和 CPU 消耗很少：

实现带有复杂的 AE 特效时许多细节渲染不出，对特效（如最基本的 Fill 也不支持）和预合成的支持比较差：（上为 AE 渲染出的视频，下为 Lottie 解析在 iPhone 模拟器上的结果）：

类似图中这样的动画也许并不实用，不过很有值得继续开发的价值，将 AE 动画应用于App之内，也许会开启 UI 动画的新时代。今后也将一边学习一边做出一些更加实用的 Lottie 动画文件分享给大家，敬请期待。

PS：

• 文中出现的动画是静止系 MAD 大师百舌谷大神的作品 《Alice》中的场景，更多作品：https://vimeo.com/user10086421/videos/page:1/sort:date
• 实践中的 AE 工程及动画数据 json 等文件分享：https://github.com/MiracleDebris/Alice