作者：John，
欢迎关注公众号“产品日经”（扫描下面二维码，或者微信搜索“产品日经”）
我们尝试过的动态原型设计工具，Origami, Form, Hype, FramerJS，Pixate 等，但都不适合。我们想要的是像 Sketch 这样简洁好用的工具，目前来看只有 Pixate 比较合适，但 Pixate 还处于早期版本，问题还很多，在第 1 经当中我也曾经提到过。
为什么是 Xcode 和 Swift? 原因很简单，我们不想做特效，只是想模拟 iOS 上真实的体验。Xcode 不是模拟动画，而像是一个 mini app，能给我们更接近真实的感受。
当然，Xcode 和 Swift 都有一定的学习曲线，但是就跟开始学习 Sketch 一样，开始阶段总是很难，很想放弃，这是人之常情。想想掌握之后的乐趣，会不会有动力一些？
这篇文章，会用 Xcode 和 Swift 做一个简单的动画。不会 Swift, 没用过 Xcode 都没有关系，我会把内容按照步骤呈现出来，方便你照着做。
开始之前，我们需要下载并安装 Xcode 6. 目前 Xcode 6 还处于 beta 阶段，需要从[
Xcode - Downloads]下载；
- 打开 Xcode，选择 Create a new Xcode project
- 模版中选择 Single View Application
- 填写相关的信息，注意这里 Language 选择 Swift, Device 选择 iPhone
- 点击 next 之后，选择项目的保存位置，然后点击 Create
- 这样我们就新建了一个项目。
我们想在屏幕上绘制一个蓝色的正方形，像这样：
- 从左侧文件导航里，打开 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)通过这一步，四行代码我们就绘制出了一个简单图形，接下来我们为图形添加一个从左到右移动的动画。
我们想让这个矩形从左到右移动，背景颜色由蓝色变为红色，可以通过这段代码实现：
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 帮助我们做了一个圆滑的过渡。
接下来我们要说明一些概念，只是为了更好地理解，可以选择跳过
什么可以被动画
我们上面只对背景颜色和位置做了动画，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运行之后可以看到，这些可选项被结合到一起了。
每次改完代码都要重新运行一次很讨厌，所以我们想要加上一个这样的 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来触发动画。
通过上面的步骤，我们能够实现一个简单的动画。考虑到代码越写越多，为了维护方便和代码重用，我们现在重构以上的代码。
首先，我们将 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() })点击左上角运行之后，跟之前动画效果一样。
上面几步，我们都是对一个方形进行动画，我们接下来随机生成多个对象，并且每个对象的大小随机，可以使用 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 { }把我们动画代码放到循环里，就实现了我们的目的。
到现在，我们掌握了基本的动画多方法。接下来我们将上面的代码改造到更有意义一些，模拟一群小鱼在屏幕上游来游去。
- 使用 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)再次运行，就可以看到小鱼随机地游来游去。
这个动画基本完成了，但是如果我们想在这个界面上动态地更改小鱼的数量呢？
如果我们想看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 UIKitclass 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. }}文章内容参照Mathew Sanders的博文 [
Prototyping Animations in Swift / iOS 8]
欢迎关注公众号“产品日经”（扫描下面二维码，或者微信搜索“产品日经”）
———————————————
发自知乎专栏「
产品日经」
转载请注明：微图摘 » Xcode Swift 制作动态原型
