Swift 弹性动画教程

最新推荐文章于 2024-08-20 20:20:20 发布

颐和园

最新推荐文章于 2024-08-20 20:20:20 发布

阅读量2.7k

点赞数

分类专栏： iPhone开发文章标签： ios swift 动画

iPhone开发专栏收录该内容

527 篇文章 11 订阅

订阅专栏

原文：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, height), controlPoint:bottom)
  path.addQuadCurveToPoint(CGPointMake(0, 0), controlPoint: left)

  // 4
  return path.CGPath
}




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

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

创建一个 UIBezierPath 对象，用于表示要绘制的曲线。
用 4 个常量表示 4 个控制点的坐标。我们使用 presentationLayer 的原因是想拿到 view 在动画过程中的“实时的”坐标。
绘制路径，依次从矩形的 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, delay: 0.0, usingSpringWithDamping: 0.15, initialSpringVelocity: 5.5,
      options: nil, animations: {
        // 5
        self.positionControlPoints()
      }, 
      completion: { _ in
        // 6
        self.stopUpdateLoop()
      })
  })
}




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

让我们逐一进行解释：

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

上述代码逐一解释如下：

用一个属性存放 ElasticView。
一个 IBInspectable 变量 overshootAmout，你可以用它在 IB 中修改控制点的弹性。它重载了 didSet 方法，在其中设置 elastic view 的 overshootAmount 属性。
类的标准初始化动作，这两个初始化方法都会调用 setupView 方法。
在这里配置 text field。这个方法又分为几个步骤：

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

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

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

D. 最后，设置 elsatic view 的 userInteractionEnabled 为 false，以免它阻断控件本身对触摸事件的接收。
重载 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, 10, 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 动画的想法，请留言给我。期待你的留言。

颐和园

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录