Swift 弹性动画教程

原文：How To Create an Elastic Animation with Swift
作者：Daniel Tavares
译者：kmyhy

每个优雅的 iOS app 都会有一些定制的元素，定制的 UI、定制动画等等。定制、定制、定制，重要的事情重复三遍。

如果你想让自己的 app 与众不同，你肯定在某些独一无二的特性上花了大量的时间，正是这些特性让你的 app 闪闪发光。

在本文中，你将创建一个定制的 text field，当你点击它的时候，它会呈现一个吸引人的弹性动画效果。

你将使用到许多好玩的 API 包括:

• CAShapeLayer
• CAdisplayLink
• UIView 弹簧动画
• IBInspectable

开始

请在这里下载开始项目。

这个项目使用了 Single View Application iOS\Application\Single View Application 模板。在容器视图中包含了两个 text field 和一个按钮。

你的最终目标是让它们获得焦点时播放一个弹性动画。你觉得要怎么做？

技术上是简单的；你将使用 4 个控制点 view 和一个 CAShapeLayer，并通过 UIView 弹簧动画的方式来驱动 4 个 控制点 view。当它们被驱动的同时，你将重绘它们四周的形状。

注意：如果你不了解 CAShapeLayer 类，Scott Gardner 写了一个精彩的教程，你可以马上去看一下。

听起来有点复杂。不过别担心，实际上比你想象要容易。

创建基本的 Elastic View

首先创建基础的 elastic view。你会用它作为 text field 的 subview，你通过驱动这个 view 来控制控件的弹动。

右键点击项目导航窗口中 ElasticUI 文件组，选择 New File…，然后是 iOS/Source/Cocoa Touch Class 模板。点击 Next。

将类命名为 ElasticView，Subclass 设置为 UIView，Language 选 Swift。点击 Next，然后选择文件存放位置。

首先，需要创建 4 个 view 和一个 CAShapeLayer。在类定义中加入代码：

import UIKit

class ElasticView: UIView {

  private let topControlPointView = UIView()
  private let leftControlPointView = UIView()
  private let bottomControlPointView = UIView()
  private let rightControlPointView = UIView()

  private let elasticShape = CAShapeLayer()

  override init(frame: CGRect) {
    super.init(frame: frame)
    setupComponents()
  }

  required init(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setupComponents()
  }

  private func setupComponents() {

  }
}

这些对象可以直接创建。setUpComponents() 方法是一个 setup 方法，在所有初始化方法中调用。接下来我们来实现它。

在 setupComponents()方法中：

elasticShape.fillColor = backgroundColor?.CGColor
elasticShape.path = UIBezierPath(rect: self.bounds).CGPath
layer.addSublayer(elasticShape)

这些代码用于设置 CAShapeLayer，设置它的填充色为 ElasticView 的背景色，将路径设置为视图的 bould。最后将 CALayer 添加为 sublayer。
然后，继续在 setupComponents() 中添加：

for controlPoint in [topControlPointView,leftControlPointView,bottomControlPointView,rightControlPointView] {
  addSubview(controlPoint)
  controlPoint.frame = CGRect(x: 0.0,y: 0.0,width: 5.0,height: 5.0)
  controlPoint.backgroundColor = UIColor.blueColor()
}

这里将所有的 控制点 添加到 view。为了便于调试，控制点 的背景色我们设置为蓝色，这样我们就能够在模拟器中直观地看到它们。调试完后你可以去掉这个颜色。

你需要将 top 控制点 分别放置到顶部居中位置、底部居中位置、左边居中位置和右侧居中位置。当你让它们从 view 向外移动时，你可以利用这些位置让 CAShapeLayer 绘制新的路径。

因为这些代码要反复用到，因此可以放到一个函数中。在 ElasticView.swift 中新增方法：

```swift
private func positionControlPoints(){
  topControlPointView.center = CGPoint(x: bounds.midX,y: 0.0)
  leftControlPointView.center = CGPoint(x: 0.0,y: bounds.midY)
  bottomControlPointView.center = CGPoint(x:bounds.midX,y: bounds.maxY)
  rightControlPointView.center = CGPoint(x: bounds.maxX,y: bounds.midY)
}




<div class="se-preview-section-delimiter"></div>

利用这个函数将 4 个 控制点 移动到合适的位置。

然后在 setupComponents 方法中调用它：

positionControlPoints()




<div class="se-preview-section-delimiter"></div>

在你开始动画之前，你需要用到一个新 UIView，通过它来观察 ElasticView 的行为。也就是说，你要在故事板中拖入一个新的 UIView。

打开 Main.storyboard，拖一个新的 UIView 到 view controller 的 view 中，将它的 Custom Class 设为 ElasticView。不要管它的位置，只要它是在屏幕上显示，你就能看到接下来会发生什么。

编译运行项目。

看到 4 个蓝色的小方块了吗——这就是我们在 setupComponents 中创建的 4 个控制点。

现在，为了达到弹性动画效果，你将使用它们在 CAShapeLayer 上绘制路径。

绘制贝塞尔曲线

在继续后面的步骤之前，需要了解如何绘制 2D 图形——实际上是绘制线段，尤其是直线和曲线。在绘制任何形状之前，如果是直线，你需要制定开始和结束位置，如果是复杂的图形，你需要制定多个位置。

点就是 CGPoint，代表了当前坐标系中的一个 x 和 y 坐标。

当你想绘制矢量图比如方块、多边形以及复杂曲线时，情况会稍微复杂一些。

要模拟弹性效果，你应当绘制一个二次贝塞尔曲线，看起来是一个矩形，但在矩形的 4 边都会有一个控制点，每边用一条曲线来制作弹性效果。

贝塞尔曲线因 Pierre Bezier 而得名，他是一位法国工程师，他在 CAD/CAM 系统中提出了如何描述一条曲线。让我们看一下这个二次贝塞尔曲线是什么样子：

蓝色的点代表了控制点，即你事先创建的 4 个 view，而红色的点是矩形的 4 个角。

注意：苹果文档中有 UIBezierPath 的类参考手册。如果你想知道如何创建路径，请阅读这个文档。

让我们看看实际应该怎么做。在 ElasticView.swift 中新增一个方法：

private func bezierPathForControlPoints()->CGPathRef {
  // 1
  let path = UIBezierPath()

  // 2
  let top = topControlPointView.layer.presentationLayer().position
  let left = leftControlPointView.layer.presentationLayer().position
  let bottom = bottomControlPointView.layer.presentationLayer().position
  let right = rightControlPointView.layer.presentationLayer().position

  let width = frame.size.width
  let height = frame.size.height

  // 3
  path.movetoPoint(CGPointMake(0,0))
  path.addQuadCurvetoPoint(CGPointMake(width,0),controlPoint: top)
  path.addQuadCurvetoPoint(CGPointMake(width,height),controlPoint:right)
  path.addQuadCurvetoPoint(CGPointMake(0,controlPoint:bottom)
  path.addQuadCurvetoPoint(CGPointMake(0,controlPoint: left)

  // 4
  return path.CGPath
}




<div class="se-preview-section-delimiter"></div>

上述代码分可以为 4 个部分：

1. 创建一个 UIBezierPath 对象，用于表示要绘制的曲线。
2. 用 4 个常量表示 4 个控制点的坐标。我们使用 presentationLayer 的原因是想拿到 view 在动画过程中的“实时的”坐标。
3. 绘制路径，依次从矩形的 4 个角开始绘制 4 条曲线，曲线的控制点就是 4 个控制点。
4. 以 CGPathRef 形式返回路径，对于一个形状图层来说，它需要提供一个 CGPathRef。

在对 4 个控制点进行动画时，你会调用这个方法，并绘制新的形状。怎么做？

一个 CAdisplayLink 对象是一个定时器，允许你的 app 将某些动作和显示刷新率同步。你可以加一个 target 和 action 给它，当屏幕刷新时，action 会被调用。

这是你重绘路径、刷新形状图层的绝佳机会。

首先，新增一个方法，用于屏幕刷新时调用：

func updateLoop() {
  elasticShape.path = bezierPathForControlPoints()
}




<div class="se-preview-section-delimiter"></div>

然后，在 ElasticView.swift 中创建一个 display link 变量：

private lazy var displayLink : CAdisplayLink = {
  let displayLink = CAdisplayLink(target: self,selector: Selector("updateLoop"))
  displayLink.addToRunLoop(NSRunLoop.currentRunLoop(),forMode: NSRunLoopCommonModes)
  return displayLink
}()




<div class="se-preview-section-delimiter"></div>

这是一个懒加载变量，也就是说，如果没有人访问它，它不会初始化。每当屏幕刷新时，它会调用 updateLoop() 方法。

你还要两个方法以启动和停止 display link:

private func startUpdateLoop() {
  displayLink.paused = false
}

private func stopUpdateLoop() {
  displayLink.paused = true
}




<div class="se-preview-section-delimiter"></div>

这样，当控制点发生变化时，你就可以绘制新的路径了。现在就让我们来移动它们！

UIView Spring 动画

苹果每次 iOS 版本发布时，总是会加入一些新特性，spring 动画正是其中之一，它使我们在增加 app 的卖点时更加容易。

它允许你在驱动某些元素动画时，可以指定阻尼系数和速度，使动画更加个性化和具有弹性！

注意：如果你想深入了解动画，请参考 iOS Animations by Tutorials。

在 ElasticView.swift 中用这个方法来驱动控制点：

func animateControlPoints() {  
  //1
  let overshootAmount : CGFloat = 10.0
  // 2
  UIView.animateWithDuration(0.25,delay: 0.0,usingSpringWithdamping: 0.9,initialSpringVeLocity: 1.5,options: nil,animations: {
    // 3
    self.topControlPointView.center.y -= overshootAmount
    self.leftControlPointView.center.x -= overshootAmount
    self.bottomControlPointView.center.y += overshootAmount
    self.rightControlPointView.center.x += overshootAmount
  },completion: { _ in
    // 4
    UIView.animateWithDuration(0.45,usingSpringWithdamping: 0.15,initialSpringVeLocity: 5.5,animations: {
        // 5
        self.positionControlPoints()
      },completion: { _ in
        // 6
        self.stopUpdateLoop()
      })
  })
}




<div class="se-preview-section-delimiter"></div>

让我们逐一进行解释：

1. overshootAmount 是控制点可能移动的距离。
2. 将动画包装成 spring 动画，时长为 1/4 秒，如果你不熟悉 spring 动画但物理学得好，请阅读 UIView 类参考手册，它对 damping(阻尼系数) 和 veLocity(速度）变量做了详尽的解说。因为我们都不是火箭科学家，所以只需要知道这些变量能够控制动画的弹性就行了。你可以调整这些数字，以找出一个最佳值。
3. 向上、左、下、右移动这些控制点——这回触发动画。
4. 创建另一个 spring 动画用于将所有小编反弹回来。
5. 将控制点的位置恢复原样——这也会触发动画。
6. 当所有东西静止后，停止 display link。

当然，你还没有调用 animateControlPoints 方法。因为你的目的是在点到控件时触发动画，因此最好是在 touchedBegan 方法中调用这个方法。

新增如下方法：

override func touchesBegan(touches: Set,withEvent event: UIEvent) {
  startUpdateLoop()
  animateControlPoints()
}




<div class="se-preview-section-delimiter"></div>

编译运行，点击你的自定义 view。成功了! :]

美化亮化工程

现在你已经看过动画的效果了，但你仍然还有一些工作要做，让 ElasticView 拥有更多加分项。

第一个问题的 overshootAmount。它的值是 10，是硬编码的，将它变成一个能够在代码和 IB 中改变变量将会更好。

Xcode 6.0 的一个新特性就是支持 @IBInspectable，这是一种可以通过 IB 来改变自定义属性的方法。

注意：如果想进一步了解 @IBInspectable，请阅读 Caroline Begbie 写的 Modern Core Graphics with Swift。

要使用这个性特性，你可以增加一个 overshootAmount 属性并用 @IBInspectable 修饰，这样你创建的每个 ElasticView 都可以有不同的 overshootAmount 值。

在 ElasticView 中新增变量：

@IBInspectable var overshootAmount : CGFloat = 10




<div class="se-preview-section-delimiter"></div>

在 animateControlPoints() 将这一行:

let overshootAmount : CGFloat = 10.0




<div class="se-preview-section-delimiter"></div>

替换为：

let overshootAmount = self.overshootAmount




<div class="se-preview-section-delimiter"></div>

回到 Main.storyboard,点击 ElasticView 打开属性面板。

你会看到在 Elastic View 下面增加了一个新的字段，叫做 Overshoot A…

每个用 @IBInspectable 声明的变量，都会在 IB 中显示为一个新的字段，你可以用它来修改变量的值。

为了检验效果，你可以复制一个 ElasticView，这样你就用两个 ElasticView 了。将新的 ElasticView 放在原来的那个上面，如：

将新、老 ElasticView 的 Overshoot Amount 分别修改为 40、20。

编译运行。点击两个 ElasticView。你会看到它们的动画有所不同，因为你在 IB 中为它们设置了不同值：

将值从 40 改为 -40，看看会发生什么。你会发现控制点向内运动，但背景却没有改变。

你一定想自己解决这个问题吧？

让我给你一点提示：你需要改变 setupComponents 方法。请自己尝试解决，如果你解决不了，再参考下面的答案。

参考答案：

// You have to change the background color of your view after the elasticShape is created,otherwise the view and layer have the same color
backgroundColor = UIColor.clearColor()
clipsToBounds = false




<div class="se-preview-section-delimiter"></div>

好了，你已经完成你的 ElasticView 了.

有了 ElasticView 之后，你可以将它放到不同的控件中，比如 text field 或者按钮中。

让 UITextField 具有弹性

现在你完成了 ElasticView 的核心功能，剩下来的任务就是将它添加到自定义的 text field 中。

在项目导航窗口中，右键点击 ElasticUI 文件组，选择 New File…，然后选择 iOS/Source/Cocoa Touch Class 模板，然后点击Next。

类名命名为 ElasticTextField，Subclass of 输入 UITextfield，语言选择 Swift。点击 Next 、Create。

打开 ElasticTextField.swift 将内容替换为：

import UIKit

class ElasticTextField: UITextField {

  // 1
  var elasticView : ElasticView!

  // 2
  @IBInspectable var overshootAmount: CGFloat = 10 {
    didSet {
      elasticView.overshootAmount = overshootAmount
    }
  }

  // 3
  override init(frame: CGRect) {
    super.init(frame: frame)
    setupView()
  }

  required init(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setupView()
  }

  // 4
  func setupView() {
    // A
    clipsToBounds = false
    borderStyle = .None

    // B
    elasticView = ElasticView(frame: bounds)
    elasticView.backgroundColor = backgroundColor
    addSubview(elasticView)

    // C
    backgroundColor = UIColor.clearColor()

    // D
    elasticView.userInteractionEnabled = false
  }

  // 5
  override func touchesBegan(touches: Set,withEvent event: UIEvent) {
    elasticView.touchesBegan(touches,withEvent: event)
  }
}




<div class="se-preview-section-delimiter"></div>

上述代码逐一解释如下：

1. 用一个属性存放 ElasticView。
2. 一个 IBInspectable 变量 overshootAmout，你可以用它在 IB 中修改控制点的弹性。它重载了 didSet 方法，在其中设置 elastic view 的 overshootAmount 属性。
3. 类的标准初始化动作，这两个初始化方法都会调用 setupView 方法。

4. 在这里配置 text field。这个方法又分为几个步骤：

   A. 将 clipsToBounds 设置为 false。这将导致 elastic view 的大小会超出父控件的边框，同时 text field 的边框风格被设置为 .None 以使控件扁平化风格。

   B. 创建 elastic view 并将它添加到控件的 subviews 中。

   C. 将控件的背景色设置为透明，因为你将用 elastic view 来产生控件背景色。

   D. 最后，设置 elsatic view 的 userInteractionEnabled 为 false，以免它阻断控件本身对触摸事件的接收。

5. 重载 touchesBegan 方法，并将事件传递给 elsatic view 以驱使它启动动画 :]

回到 Main.storyboard，选择两个 text field，在属性面板中，将它们的 Class 从 UITextField 改为 ElasticTextField。

别忘了还要将两个用于测试的 elastic view 删除。

编译运行。点击 text field，它的实际效果却是这样：

这是因为我们在代码中创建 elastic view 时，它的背景色就是透明的，所以 shape layer 的颜色也就是透明的了。

要解决这个问题，你需要编写某种方法，当我们为 elastic view 设置一种新的背景色时，将背景色的值传递给 shape layer。

传递背景色

由于你想用 elastic view 作为控件的主体背景，因此你需要重载 elastic view 的 backgroundColor 属性。

在 ElasticView.swift 中加入：

override var backgroundColor: UIColor? {
  willSet {
    if let newValue = newValue {
      elasticShape.fillColor = newValue.CGColor
      super.backgroundColor = UIColor.clearColor()
    }
  }
}




<div class="se-preview-section-delimiter"></div>

在设置属性之前，willSet 方法被调用。在这里检查 newValue 是否非空，然后后设置 shape layer 的 fillColor 为用户设置的颜色。然后调用父类 backgroundColor 属性的 setter 方法，设置它的背景色为透明。

编译运行，你会看到一个可爱的弹性动画。成功了！:]

最后的修改

有一点不知道你发现了没有，text field 的 placeholder 文本距离左边框实在是太近了。你不觉得显得有点拥挤吗？你能够自己解决这个 bug 吗？

这次我不会给你任何提示了。如果你实在解决不了，再参考下面的答案。

// Add some padding to the text and editing bounds
override func textRectForBounds(bounds: CGRect) -> CGRect {
  return CGRectInset(bounds,10,5)
}

override func editingRectForBounds(bounds: CGRect) -> CGRect {
  return CGRectInset(bounds,5)
}




<div class="se-preview-section-delimiter"></div>

去掉调试日志

打开 ElasticView.swift，从 setupComponents 方法中删除这一句：

controlPoint.backgroundColor = UIColor.blueColor()

祝贺你，大功告成了！你已经将一个标准的 text field 变成了某种会不停弹跳的玩意，同时还创建了一个能够用在所有控件上的定制 UIView。

结束语

这是最终完成项目的[下载链接](completed project)。

你拥有了一个能够独立运行的弹性 text field。你可以将同样的技术可以用在更多的控件身上。

你学会了如何使用视图的位置重绘自定义形状并给它添加弹性效果。你可以随心所欲地使用这种技术。

接下来，你可以尝试更多的动画，为某些更复杂的形状添加更多的控制点，等等。

请浏览 easings.net；这是一个有趣的地方，介绍通过 easing 函数来实现的不同的动画效果。

当你对这些技术有点腻了，你可以看一下如何在项目中使用 BCMeshTransformView。它是 Bartosz CiechaNowski 编写的，它允许你控制视图中的每一个像素。

试想一下，如果你能将每个像素变化出不同的形状，这有多酷 :]

非常高兴你能看完这篇用 Swift 创建一个带弹性的 UI 控件的教程，希望你能从中有所获益。如果有任何问题、建议或者关于 Swift 动画的想法，请留言给我。期待你的留言。