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


}