Swift 实现iOS Animation动画教程

这是一篇翻译文章。原文出处:http://www.raywenderlich.com/95910/uiview-animation-swift-tutorial

动画( animation)是iOS用户界面中非常重要的知识。动画可以吸引用户的注意力,使程序更加美观生动。

更值得注意的是,在扁平化设计时代,动画是让优秀程序脱引而出的一个关键因素。

举个例子

下载这个开始项目(地址:http://cdn4.raywenderlich.com/wp-content/uploads/2015/02/BahamaAir-Starter.zip),程序是一个虚构的航空公司-“Bahama Air”的登陆界面。后面我门就是通过动画让这个界面更美观点。

现在运行效果图:

Swift 实现iOS Animation动画教程

开始实现一个简单动画:

1、隐藏界面

在viewController.swfit的viewWillAppear()方法中添加如下代码:

heading.center.x  -= view.bounds.width

username.center.x -= view.bounds.width

password.center.x -= view.bounds.width

此时运行,隐藏了三个组建,效果如图:

Swift 实现iOS Animation动画教程

在viewDidAppear()中添加如下代码来显示头部label“Bahama Login”

UIView.animateWithDuration(0.5, animations: {

  self.heading.center.x += self.view.bounds.width

})

运行后,头部label“Bahama Login”向右滑动到中心位置,如图:

Swift 实现iOS Animation动画教程

延迟动画

在viewDidAppear()中添加如下代码来显示username 文本输入框:

UIView.animateWithDuration(0.5, delay: 0.3, options: nil, animations: {

  self.username.center.x += self.view.bounds.width

}, completion: nil)

代码解释:

1.duration:动画时长

2.delay:延迟时长

3.option:掩码选项告诉如何显示动画,待会再介绍

4.animation:显示动画内容的闭包

5.completion:动画执行完毕后执行的闭包。用语清理工作或者执行更多动画使用

运行后效果如图:

Swift 实现iOS Animation动画教程

可以用来执行动画的UIView属性

不是所有的UIView属性都可以实现动画效果,下面我们列举可以作为动画的UIView属性。

1.位置和大小(position and size)如bounds、frame、center

Swift 实现iOS Animation动画教程

2.显示样式(appearance)。如backgroundColor、alpha

Swift 实现iOS Animation动画教程

变形( transformation)。如transformation

Swift 实现iOS Animation动画教程

动画选项(Animation Options)

1.重复 repeating

.Repeat:让动画重复循环执行

.Autoreverse:只能喝.repeat一起使用,让动画来回执行

2.动画自然(Animation Easing)

现实生活中运动时不回突然启动和突然停止,而是缓慢加速启动,平稳运行,缓慢减速停下。如图所示:

Swift 实现iOS Animation动画教程

我们在执行动画的时候四个让动画更自然(easing)的选项:

.Linear:这个选项让动画平稳运行

.CurveEaseIn:这个选项让动画加速开始

.CurveEaseOut:这个选项让动画减速停下

.CurveEaseInOut:这个选项让动画加速开始,减速结束。

在viewDidAppear()中添加如下代码:

UIView.animateWithDuration(0.5, delay: 0.4,

  options: .Repeat | .Autoreverse | .CurveEaseOut, animations: {

    self.password.center.x += self.view.bounds.width

}, completion: nil)

运行后,password文本框从左侧滑进,然后减速停在中间,效果如图:

Swift 实现iOS Animation动画教程

基本的动画就介绍到这里。

上一篇:Android Parcelable Trans byte[]


下一篇:用PE安装操作系统时:无法创建新的系统分区 也无法定位现有系统分区 的解决办法