Xcode + Swift 制作动态原型

为什么是 Xcode和Swift

我们尝试过的动态原型设计工具，Origami, Form, Hype, FramerJS，Pixate 等，但都不适合。我们想要的是像 Sketch 这样简洁好用的工具，目前来看只有 Pixate 比较合适，但 Pixate 还处于早期版本，问题还很多，在第 1 经当中我也曾经提到过。

为什么是 Xcode 和 Swift? 原因很简单，我们不想做特效，只是想模拟 iOS 上真实的体验。Xcode 不是模拟动画，而像是一个 mini app，能给我们更接近真实的感受。

当然，Xcode 和 Swift 都有一定的学习曲线，但是就跟开始学习 Sketch 一样，开始阶段总是很难，很想放弃，这是人之常情。想想掌握之后的乐趣，会不会有动力一些？

这篇文章，会用 Xcode 和 Swift 做一个简单的动画。不会 Swift, 没用过 Xcode 都没有关系，我会把内容按照步骤呈现出来，方便你照着做。

准备工作

开始之前，我们需要下载并安装 Xcode 6。

第 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.     } } 

文章内容参照Mathew Sanders的博文 [ Prototyping Animations in Swift/iOS 8 ]