为什么是 Xcode 和 Swift
我们尝试过的动态原型设计工具，Origami, Form, Hype, FramerJS，Pixate 等，但都不适合。我们想要的是像 Sketch 这样简洁好用的工具，目前来看只有 Pixate 比较合适，但 Pixate 还处于早期版本，问题还很多，在第 1 经当中我也曾经提到过。
为什么是 Xcode 和 Swift? 原因很简单，我们不想做特效，只是想模拟 iOS 上真实的体验。Xcode 不是模拟动画，而像是一个 mini app，能给我们更接近真实的感受。
当然，Xcode 和 Swift 都有一定的学习曲线，但是就跟开始学习 Sketch 一样，开始阶段总是很难，很想放弃，这是人之常情。想想掌握之后的乐趣，会不会有动力一些？
这篇文章，会用 Xcode 和 Swift 做一个简单的动画。不会 Swift, 没用过 Xcode 都没有关系，我会把内容按照步骤呈现出来，方便你照着做。
第 1 步: 新建一个 Project
打开 Xcode，选择 Create a new Xcode project
模版中选择 Single View Application
填写相关的信息，注意这里 Language 选择 Swift, Device 选择 iPhone
点击 next 之后，选择项目的保存位置，然后点击 Create
这样我们就新建了一个项目。
第 2 步: 在界面中绘制一个矩形
我们想在屏幕上绘制一个蓝色的正方形，像这样
从左侧文件导航里，打开 ViewController.swift 这个文件
不要被这里的其他代码干扰，我们所要做的就是在 viewDidLoad() 这个函数里添加我们的代码
通过 let coloredSquare = UIView() 创建一个正方形。这里 let 表示创建的是一个常量。UIView 是 UIKit 提供的绘制图形的一个函数。
设置图形的背景颜色 coloredSquare.backgroundColor = UIColor.blueColor()
绘制图形的位置和大小 coloredSquare.frame = CGRectMake(0, 120, 50, 50) iOS 的坐标系统是从屏幕左上角开始的，也就是说左上角是(0, 0)，所以我们绘制的是一个坐标为(0, 120)，边长为 50 的一个矩形
将图形添加到视图当中 self.view.addSubview(coloredSquare)
点击左上角的三角形按钮，运行一下。可以看到图形被绘制到了一个 iPhone 模拟器当中。
代码如下：
// Create and add a colored square
let coloredSquare = UIView()
// Set background color to blue
coloredSquare.backgroundColor = UIColor.blueColor()
// Set frame of the square
coloredSquare.frame = CGRectMake(0, 120, 50, 50)
// Add the square to the screen
self.view.addSubview(coloredSquare)
通过这一步，四行代码我们就绘制出了一个简单图形，接下来我们为图形添加一个从左到右移动的动画。
第 3 步: 给图形添加动画效果
我们想让这个矩形从左到右移动，背景颜色由蓝色变为红色，可以通过这段代码实现：
UIView.animateWithDuration(1.0, animations: {
// Change the background color when animation ends
coloredSquare.backgroundColor = UIColor.redColor()
// Change the position of the square
coloredSquare.frame = CGRectMake(320-50, 120, 50, 50)
})
下面做以解释：
Apple 在 UIView 这个类当中提供了 animationWithDuration 函数，这个函数需要两个参数 1) 动画持续的时间 2) 动画结束的状态。其中动画结束的状态是通过定义在 block 中实现的，block 可以理解成是把一块代码当作参数传递给函数。
改变颜色的代码 coloredSquare.backgroundColor = UIColor.redColor()
改变正方形的位置 coloredSquare.frame = CGRectMake(320-50, 120, 50, 50) 这里 x 坐标为什么是 320 - 50？因为 iPhone 5s 横坐标有 320 points，矩形的宽为 50 points，为了完整显示矩形我们要让它横坐标为 320-50.
点击左上角运行按钮，可以看到 iOS 模拟器出现了这个小动画。
可以看到，我们只定义了初始状态和结束状态，以及过渡时间， iOS 帮助我们做了一个圆滑的过渡。
接下来我们要说明一些概念，只是为了更好地理解，可以选择跳过
第 4 步: 了解 animationWithDuration 方法
什么可以被动画
我们上面只对背景颜色和位置做了动画，UIView 还提供了对更多属性做动画的方法：
1. frame. 可以改变视图的大小和相对位置；
2. transform. 改变属性为 旋转，放大，或者相对于中点的位置；
3. alpha. 改变视图的透明度；
4. backgroundColor. 改变视图背景颜色；
5. contentStretch. 改变视图内容填充到整个空间中。
更多动画方法
Apple 给了我们四个动画函数，上面我们只是用了最简单的一个。下面是对这四个函数的简要说明：
1. 简单动画函数
UIView.animateWithDuration(duration, {
})
这也是我们上面所使用的，只有两个变量：
* duration. 动画所需要的时间(秒)
* animation. 定义动画
2. 包含结束方法的动画方法
UIView.animateWithDuration(duration, animations: {
}, completion: { finished in
})
增加了一个变量completion，它定义了当动画完成时运行的代码。
3. 包含 options 和 completion 的动画方法
UIView.animateWithDuration(duration, delay: delay, options: options, animations: {
}, completion: { finished in
})
增加了两个参数：
* delay: 动画开始前需要等待的时间(秒)；
* options: 更多可以改变动画效果的选择
4. 包含弹簧物理特性的动画方法
这是 iOS 7 中新增的，允许我们创建一个基于动画对物理引擎。
UIView.animateWithDuration(duration, delay: delay, usingSpringWithDamping: damping, initialSpringVelocity: velocity, options: options, animations: {
}, completion: { finished in
})
增加了两个参数：
* dampingRatio. 定义振幅大小（0＝无穷；1=没有）
* initialVelocity. 动画开始有多快（1=正常）
** UIViewAnimationOptions **
Apple 在动画方法中给出了许多可选项。比如，我们传递给参数 options 一个 Repeat 值:
let options = UIViewAnimationOptions.Repeat
UIView.animateWithDuration(1, delay: 0.0, options: options, animations: {
coloredSquare.backgroundColor = UIColor.redColor()
coloredSquare.frame = CGRectMake(320-50, 120, 50, 50)
}, completion: nil)
运行之后，可以看到，动画不断重复。如果将 options 的值改为 Autoreverse呢
方形动画结束之后，按照相反的顺序会再执行一遍。这里有一个比较奇怪的地方，就是反方向执行之后，方形会自动回到右边，变成红色。这是因为我们设置的结束动画就是这样。
接下来我们使用 ‘|’分割线将Autoreverse, Repeat 和 CurveEaseInOut 结合到一起。
let options = UIViewAnimationOptions.Autoreverse | UIViewAnimationOptions.Repeat | UIViewAnimationOptions.CurveEaseInOut
运行之后可以看到，这些可选项被结合到一起了。
第 5 步: 触发动画
每次改完代码都要重新运行一次很讨厌，所以我们想要加上一个这样的 button，每次点击之后会触发动画，而不是重新运行。
从 ViewController.swift 切换到 Main.storyboard，我们不使用 auto layout所以需要从右上角 File Inspector中关闭 Use Auto Layout
从右下角拖拽一个 Button 到故事版中，修改label 为 “Animate”
从右上角打开 Assistant Editor，允许我们同事看到storyboard 和对应的类文件
按住control键的同时，拖拽Button到ViewController.swift文件里的viewDidLoad()函数下
上一步打开了一个popover允许我们建立一个连接。默认连接方式是 outlet，我们需要的是 Action, Name 填为 animateButtonPressed，然后点击 Connect 按钮
此时，Xcode 帮我们生成了一个函数
@IBAction func animateButtonPressed(sender: AnyObject) {
}
这个函数与storyboard中的button建立了连接，每次被点击都会调用这里的函数。
最后，剪切viewDidLoad()中的代码到我们这个函数里面，这样每次点击button就会呈现对应的动画
点击运行按钮，通过点击 Animate Button来触发动画。不幸的是，每次运行完之后，还是停留在最终状态，不能够重新回到开始状态。这里 completion 参数就派上用场了。
UIView.animateWithDuration(1.0, animations: {
coloredSquare.backgroundColor = UIColor.redColor()
coloredSquare.frame = CGRect(x: 320-50, y: 120, width: 50, height: 50)
}, completion{ animationFinished in
coloredSquare.removeFromSuperview()
})
这样，我们就实现了通过点击button来触发动画。
第 6 步: 重构代码通过上面的步骤，我们能够实现一个简单的动画。考虑到代码越写越多，为了维护方便和代码重用，我们现在重构以上的代码。
首先，我们将 hardcode 的部分
let coloredSquare = UIView()
coloredSquare.backgroundColor = UIColor.blueColor()
coloredSquare.frame = CGRectMake(0, 120, 50, 50)
self.view.addSubview(coloredSquare)
变为更为通用的变量:
let size: CGFloat = 50
let yPosition: CGFloat = 120
let coloredSquare = UIView()
coloredSquare.backgroundColor = UIColor.blueColor()
coloredSquare.frame = CGRectMake(0, yPosition, size, size)
self.view.addSubview(coloredSquare)
然后，重构动画部分的代码
let duration = 1.0
let delay = 0.0
let options = UIViewAnimationOptions.CurveLinear
UIView.animateWithDuration(duration, delay: delay, options: options, animations: {
coloredSquare.backgroundColor = UIColor.redColor()
coloredSquare.frame = CGRectMake(320-size, yPosition, size, size)
}, completion: { animationFinished in
coloredSquare.removeFromSuperview()
})
点击左上角运行之后，跟之前动画效果一样。
第 7 步: 使用循环
上面几步，我们都是对一个方形进行动画，我们接下来随机生成多个对象，并且每个对象的大小随机，可以使用 rand()方法生成一个随机数：
let size: CGFloat = CGFloat(Int(rand()) % 40 + 20.0)
let yPosition: CGFloat = CGFloat(Int(rand()) % 200 + 20.0)
现在，我们点击一次就会生成一个方形。接下来我们把这些放在一个循环里，每点击一次就会出现多个图形。Swift 中的循环长这样：
for loopNumber in 0...10 {
}
把我们动画代码放到循环里，就实现了我们的目的。
第 8 步: 模拟小鱼游来游去
到现在，我们掌握了基本的动画多方法。接下来我们将上面的代码改造到更有意义一些，模拟一群小鱼在屏幕上游来游去。
使用 Sketch 画一只小鱼，导出为 fish.png。将fish.png直接拖拽到 Xcode里，images.xcassets文件夹下；
回到 ViewController.swift 文件下，将之前的矩阵修改为小鱼：
let fish = UIImageView()
fish.image = UIImage(named: "fish")
fish.frame = CGRectMake(0, yPosition, size, size)
self.view.addSubview(fish)
同时，对动画这里的代码也做修改：
UIView.animateWithDuration(duration, delay: delay, options: options, animations: {
fish.frame = CGRectMake(320-size, yPosition, size, size)
}, completion: { animationFinished in
fish.removeFromSuperview()
})
重新运行，可以看到出现了10条鱼。每一个大小和y轴的位置都不一样。
这里有3个问题，1) 每次小鱼直接尾巴就出现; 2)头刚碰到屏幕右边就会消失; 3)小鱼都是同时出现同时消失。第一个问题我们可以修改将小鱼的初始位置由 0 变为 0-size
fish.frame = CGRectMake(0-size, yPosition, size, size)
第二个问题，原因是我们将动画结束位置设在了320-size，为了让小鱼能够完整游出界面，我们修改动画结束时yPosition为320
fish.frame = CGRectMake(320, yPosition, size, size)
第三个问题，现在他们都粘在一起，怎样让他们分散开来呢？可以通过给x轴一个随机数；或者给动画一个延迟。这里我们使用改变x轴的方法解决：
给x轴一个随机的初始位置
let xPosition: CGFloat = CGFloat((Int(rand()) % 320)-320)
同时更改小鱼生成时的位置
fish.frame = CGRectMake(xPosition, yPosition, size, size)
为了让每条鱼在界面上逗留的时间不一样，我们同时给duration一个随机值
let duration = NSTimeInterval(Int(rand()) % 3)
再次运行，就可以看到小鱼随机地游来游去。
这个动画基本完成了，但是如果我们想在这个界面上动态地更改小鱼的数量呢？
第 8 步: 动态更改小鱼数量
如果我们想看100只小鱼，1000只小鱼，为了不每次更改代码重新运行，与button类似，我们可以在界面上增加一个 slider。
切换到故事版，拖一个slider过来，再拖一个label
选中Slider，从右上角属性检查器更改Slider的上限，下限和默认值。这里我们更改下限为0，上限为100
点击右上角的 Assistant Editor，与之前类似的步骤：按住control，同时拖动 Slider 到viewDidLoad()函数上面的位置
在弹出的popover中，保持类型为Outlet，name给一个numberOfFishSlider，Xcode中会生成
@IBOutlet var numberOfFishSlider: UISlider!
现在，我们需要做的就是改变循环次数。我们可以通过 self.numberOfFishSlider.value 拿到当前位置的值，只需要转换为 Int类型
let numberOfFish = Int(self.numberOfFishSlider.value)
for loopNumber in 1...numberOfFish {
现在，可以从Slider上选择不同数量的小鱼，看效果。
到现在，我们的动画原型就完成了。下面是完整代码：
//
// ViewController.swift
// Animation
//
// Created by John on 9/17/14.
// Copyright (c) 2014 WeChat. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
@IBOutlet var numberOfFishSlider: UISlider!
override func viewDidLoad() {
super.viewDidLoad()
}
@IBAction func animateButtonPressed(sender: AnyObject) {
let numberOfFish = Int(self.numberOfFishSlider.value)
for loopNumber in 1...numberOfFish {
let duration = NSTimeInterval(Int(rand()) % 3)
let delay = 0.0
let options = UIViewAnimationOptions.CurveLinear
let size: CGFloat = CGFloat(Int(rand()) % 40 + 20.0)
let yPosition: CGFloat = CGFloat(Int(rand()) % 200 + 20.0)
let xPosition: CGFloat = CGFloat((Int(rand()) % 320)-320)
// Create and add fish image
let fish = UIImageView()
fish.image = UIImage(named: "fish")
fish.frame = CGRectMake(xPosition, yPosition, size, size)
self.view.addSubview(fish)
// Create Animation
UIView.animateWithDuration(duration, delay: delay, options: options, animations: {
fish.frame = CGRectMake(320, yPosition, size, size)
}, completion: { animationFinished in
fish.removeFromSuperview()
})
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
