iOS UIView动画实践（一）：揭开Animation的神秘面纱

http://www.csdn.net/article/2015-07-02/2825115-ios-uiview-animation-1

前言

在一个看脸的社会中，不论什么事物，长得好看总是能多吸引一些目光。App同样不例外，一款面相不错的App就算功能已经被轮子千百遍，依然会有人买账，理由就是看得顺眼，于是平面设计人员越来越被重视。白驹过隙，斗转星移，人们已然不满足于静态的美感，于是动态的用户体验应运而生，平面设计人员捉襟见肘，是我们程序员出马的时候了。

这篇文章是UIView Animation的第一篇，从极简的概念开始，为大家揭开Animation的神秘面纱。我们以一个登录界面为例。美丽的太阳，婀娜的云，还有几个小山包，中间静躺着用户名、密码输入框和登录按钮。搁以前，这个界面许是会亮瞎眼现如今尼玛狗都嫌。所以我们的目标是赋予这个界面生命力。



注意：本文章基于Swift 2.0和Xcode 7 Beta 2编写。登录界面中的所有元素都已经连接到了代码中（outlet），在这个示例中我们先不使用Auto Layout和SizeClasses。

会动的输入框

我们的第一个场景应该是这样。用户打开App，启动画面过后显示登录界面，此时屏幕上还没有用户名和密码的输入框，下一秒他们从屏幕左侧飘然而至。

首先

我们需要在登录界面还没有展现给用户的时候把用户名和密码的输入框移至屏幕外面。打开

ViewController.swift

，在

viewWillAppear()

方法中添加以下代码：

[cpp] view
plaincopy

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

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

这两行代码使用户名、密码输入框移出屏幕外，这里可以使用简单暴力的方式，直接让

center

的

x

减去屏幕宽度。

然后

我们在

viewDidAppear()

方法中添加以下代码：

[cpp] view
plaincopy

UIView.animateWithDuration(0.5, animations: {

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

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

})

animationWithDuration(_:animations:)

是

UIView

的类方法，从方法名就可以看出，该方法可使

UIView

动起来。它有两个参数：

duration

：动画的持续时间。

animation

：动画闭包，在这个闭包中你可以改变

UIView

的各种动画属性。

因为该方法是一个类方法，所以在闭包中你可以同时改变多个

views

的动画属性。所以在上述代码中，同时改变了用户名和密码输入框的位置。编译运行，我们可以看到如下效果：

但是由于两个输入框是同时从屏幕外滑入，略显呆板，所以我们用另一个方法再来润色一下。