Lottie初级教程：打造iOS APP完美动画

http://www.cocoachina.com/ios/20170503/19168.html

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

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

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

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

• 什么是Lottie？

• 你可以从哪儿获取Lottie动画文件？

• 在你的iOS项目中你可以如何使用它？

什么是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。

1

pod init

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

1

2

3

4

5

6

7

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运行下列指令：

1

 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 动画库输入进去：

1

 import Lottie

接下来更新viewDidLoad()如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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()

    }

     

}

上面就是你播放动画需要的代码。在Lottie中有个LOTAnimationView分类可以直接从JSON文件下载动画数据。你要先用你已经下载好的JSON文件创建一个LOTAnimationView对象，你才能展示这个动画。

LOTAnimationView是UIView的一个子分类，所以你只要像执行其他视图一样执行LOTAnimationView就可以了。我们先将它的大小重置，放在中心位置，把内容模式设为Aspect Fill；然后我们调用addSubview把动画视图添加到主视图；最后，我们调用play()播放动画。

现在我们运行项目看看APP的效果是什么样。只要打开APP，它就会实时播放动画。

 

循环动画

默认情况下，动画只播放一次。如果你想循环播放动画，你可以把loopAnimation属性设为true如下：

1

 animationView.loopAnimation = true

LOTAnimationView 分类也为你自定义动画提供了大量属性。如果你想放慢动画播放速度，只要像下面这样改变animationSpeed属性就行了：

1

animationView.animationSpeed = 0.5

从远程服务器上载入Animation JSON File

你不仅可以把JSON文件保存在本地，而且可以把动画数据保存在远程服务器上。Lottie已经为开发者从远程URL上下载JSON文件准备好了API。用下面的代码替换animationView的初始化界面，看看你会得到什么样的动画。

1

let animationView = LOTAnimationView(contentsOf: URL(string: "https://github.com/airbnb/lottie-ios/raw/master/Example/Assets/PinJump.json")!)

动画视图转换

LOTAnimationView和UIView一样都支持不同类型的动画转换。你可以通过合理地设置转换属性对动画进行旋转，大小重置，位置重置。下面是一个把动画顺时针转换45度的转换示例：

1

2

let rotateTransform = CGAffineTransform(rotationAngle: 45.0)

animationView.transform = rotateTransform

相似的，你可以像其他标准UIView对象一样把UIView动画覆盖在原来的动画上。我们在现有的动画上重建一不同大小的动画。用下面的代码把viewDidLoad()替换掉：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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.loopAnimation = true

        animationView.contentMode = .scaleAspectFill

        animationView.animationSpeed = 0.5

         

        // Applying UIView animation

        let minimizeTransform = CGAffineTransform(scaleX: 0.1, y: 0.1)

        animationView.transform = minimizeTransform

        UIView.animate(withDuration: 3.0, delay: 0.0, options: [.repeat, .autoreverse], animations: {

            animationView.transform = CGAffineTransform.identity

        }, completion: nil)

         

        view.addSubview(animationView)

     

        animationView.play()

    }

     

}

运行APP你就会得到下面的结果，是不是很有趣呢？

 

接下来呢？

好的UI动画不仅能使你的应用上一个层次，而且能提供动人的用户体验。在Lottie出现之前，用After Effects来真正地实现动画的确是非常艰难又耗时的工作。但现在有了这个强大的动画库将使得动画实现变得无比轻松。

在这个教程中，你应该已经学会了如何使Lottie服务于你的iOS项目。我在这儿只是大概介绍了一下Lottie的要点，你可以在GitHub上了解更多关于Lottie的信息。不仅如此，我们在下期教程将通过建立一个炒鸡棒的管理动画对Lottie进行更加深入的探讨。

保持关注哦。如果你喜欢这个教程，请在下方留言或分享给你的朋友。

你可以在GitHub上下载这个简单的Xcode项目以供参考。