好的APP用户界面动画如果通过精准的设计就能极大地提升用户体验。这也常常是区分APP优秀与否的一个重要标准。实现与设计一个有意义且实用的动画是同样困难的，尤其是当动画或者视图切换非常复杂时，对iOS开发者来说是很难将这个动画在APP中实现的。

假设你不是一个独立开发者，而是在一个开发者或者UI/UX的设计师团队。有多少次设计师向你展示一个很好很酷的动画并希望能置入应用时，你也觉得这个动画很好很漂亮啊，但是却真的很难而且程序也非常长。

但有了Airbnb开发的Lottie，开发者就可以免去写一行一行的代码而非常容易地渲染动画了。你可以直接把 Adobe After Effects的动画用在你的Xcode 项目中。这真的非常实用并且还能把你实现动画的大量时间节省下来。

在这个教程中，我将向你展示如下：

什么是Lottie？

首先要说的是：什么是Lottie呢？由Airbnb开发的Lottie是一个将After Effects动画提供给任意一个iOS，macOS，Android还有React Native原生APP的文件库。这些动画通过一个叫Bodymovin的开源After Effects插件，以JSON文件的形式进行输出。Lottie通过JSON格式下载动画数据并实时提供给开发者。

换句话说，你也可以通过设计器直接把JSON文件放入Xcode project，让Lottie帮你下载动画。当然别误会，你还是需要为你的动画写一些代码，但是你会发现Lottie的确将为你的动画编码节省大量的时间。

Lottie现在不仅在GitHub上已经开源，而且还提供一个示例项目和一系列的示例动画，看看下面有没有你能用在iOS Apps当中示例动画吧。

Lottie 动画文件

在使用Lottie之前，你需要一个以JSON文件形式输出的动画数据库。如果你已经有了一个After Effects动画，用Bodymovin插件来创建JSON文件。

如果你不会使用After Effects呢？你要如何准备你的动画？你可以雇一位设计师为你设计动画，或者你学会用After Effects。

幸运的是，这里还有一个选项，那就是：Lottie Files

Lottie Files是一个拥有高质量Lottie文件格式动画的网站。在这个网站，不仅设计师可以在上面陈列他们的动画而且还提供免费下载。像我一样没有After Effects使用经验的人一定会觉得这个动画库非常好用！

在Xcode中使用Lottie

如果你已经有了一个动画文件，剩下的就是准备好Xcode project。和iOS库相似地，最容易的方法就是用CocoaPods将Lottie放入Xcode 项目中。

让我们来做个演示看看Lottie是怎样工作的。

首先，启动Xcode并用Single View Application范本创建一个新项目，把新项目命名为LottieDemo（或任意你喜欢的名字）并保存。

用CocoaPods安装Lottie动画库

当你创建完项目，离开Xcode，打开Terminal。我们将为安装Lottie动画库创建一个Podfile。我想你应该已经有一些使用CocoaPods的经验并且已经把它安装在你的电脑中了。

在terminal中运行下列指令来创建一个Podfile。

pod init

然后打开文件像这样编辑：

target 'LottieDemo' do   # Comment the next line if you're not using Swift and don't want to use dynamic frameworks   use_frameworks!     # Pods for LottieDemo   pod 'lottie-ios' end

我们只加一行pod 'lottie-ios' 来指出这是这个项目需要的pod。然后回Terminal运行下列指令：

 pod install

CocoaPods会下载Lottie动画库并在Xcode项目中打包。打包结束后你会发现出现一个叫LottieDemo.xcworkspace.的新项目文件。在Xcode中打开这个文件并开始进行编码。

添加Animation JSON Files

如果你用自己的动画文件对Lottie进行测试最好，但没有也没关系，从lottiefiles.com下载这个JSON格式的免费文件，我们将用这个文件做个快速的演示。

现在把JSON文件 (servishero_loading.json)拖入Xcode项目的工程管理器，把它放入LottieDemo小组。

创建多动画视图 

现在来到有趣的部分了，你将用不到10行代码就能执行这个示例动画。

打开ViewController.swift，然后加入一行代码将Lottie 动画库输入进去：

 import Lottie

接下来更新viewDidLoad()如下：

override func viewDidLoad() {     super.viewDidLoad()                  if let animationView = LOTAnimationView(name: "servishero_loading") {         animationView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)         animationView.center = self.view.center         animationView.contentMode = .scaleAspectFill                  view.addSubview(animationView)              animationView.play()     }      }