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对象,你才能展示这个动画。

LOTAnimationViewUIView的一个子分类,所以你只要像执行其他视图一样执行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" )!)

动画视图转换

LOTAnimationViewUIView一样都支持不同类型的动画转换。你可以通过合理地设置转换属性对动画进行旋转,大小重置,位置重置。下面是一个把动画顺时针转换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项目以供参考。


你可能感兴趣的:(IOS/OC代码)