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”的登陆界面。后面我门就是通过动画让这个界面更美观点。 

现在运行效果图：

开始实现一个简单动画：

1、隐藏界面

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

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

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

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

此时运行，隐藏了三个组建，效果如图：

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

UIView.animateWithDuration(0.5, animations: {

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

})

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

延迟动画

在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:动画执行完毕后执行的闭包。用语清理工作或者执行更多动画使用

运行后效果如图： 

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

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

1.位置和大小（position and size）如bounds、frame、center

2.显示样式（appearance）。如backgroundColor、alpha

 变形（ transformation）。如transformation 

动画选项（Animation Options）

1.重复 repeating

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

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

2.动画自然（Animation Easing）

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

我们在执行动画的时候四个让动画更自然（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动画教程

标签：

原文地址：http://www.cnblogs.com/JackieHoo/p/4420423.html