用 CAShapeLayer、毛玻璃镂空效果创建加载动画

原文：
Creating an activity indicator using CAShapeLayer,blur effect and vibrancy
作者：Marin Todorov
译者：kmyhy

这个教程使用 Xcode 7/Swift 2。我在编写 Doodle Doodle app 时曾经准备了大量视频以便向用户知道显示如何使用和安装 Doodle Doodle 键盘扩展。我将视频上传到 Vimeo，当等候视频文件上传的时候瞬间被它们的加载动画吸引住了。

This tutorial is designed for Xcode 7/Swift 2 or a compatible version.

我决定用 Swift 创建类似的动画效果，在我的 app 中用代码自己实现。我将视觉效果进行了 iOS 适配，最终变成这样：

在这篇教程中，我将展示整个制作过程，并将这个进度指示器叫做 SwiftSpinner。

CALayer 的 Spring 动画

如果你读过《iOS Animations by Tutorials》或者有一点 Swift 动画经验，你就会知道在 UIKit 中创建 spring 动画(弹簧动画)非常简单。让我们来看看如何将 CALayer 的 spring 动画和毛玻璃效果（blur effect and vibrancy）结合，创建好看的进度指示器。

新建 Xcode 项目，选择 iOS/Application/Single View Application 项目模板。语言选择 Swift，项目名称叫做 LayerSprings。将项目保存到某个位置。

首先在屏幕上添加一个 UIView 和一个弧形。

打开 ViewController.swift 添加 3 个类常量：

let size = CGSize(width: 200.0,height: 200.0)
let circleView = UIView()
let circleLayer = CAShapeLayer()

声明一个 UIView，用于添加到 view controller，以及一个 CAShapeLayer 用于显示弧形。

然后在 viewDidAppear 方法中编写绘制代码：

override func viewDidAppear(animated: Bool) {
  super.viewDidAppear(animated)

  circleView.frame.size = size

  circleLayer.frame.size = size
  circleLayer.position = circleView.center
  circleLayer.path = UIBezierPath(ovalInRect: circleView.frame).CGPath
  circleLayer.lineWidth = 6.0
  circleLayer.strokeStart = 0.0
  circleLayer.strokeEnd = 0.4
  circleLayer.lineCap = kCALineCapRound
  circleLayer.fillColor = UIColor.clearColor().CGColor
  circleLayer.strokeColor = UIColor.orangeColor().CGColor
}

这段代码设置了 circleView 的 size 然后对 CAShapeLayer 进行配置让它显示一个橙色的圆弧。注意你不必绘制整圆，而是用一段圆弧让它做圆周运动。

关于 CAShapeLayer 的属性和动画，请参考《iOS Animations by Tutorials》第 13 章“形状和遮罩”以及第 15 章“笔触和路径动画”。

设置好形状，你就可以将它添加到 circleView 的图层上了：

circleView.layer.addSublayer(circleLayer)

最后将 cicleView 添加到 view controller 的 view 的中心位置：

circleView.center = view.center
circleView.backgroundColor = UIColor(white: 0.95,alpha: 1.0)
view.addSubview(circleView)

它将显示在屏幕中心，背景色为浅色以便你能看清动画。Build & run，你会看到：

很好——你可以对它使用 spring 动画并让 CAShapeLayer 动起来！

添加一个让圆弧动起来的方法：

func animate() {
    let newTransform = CATransform3DRotate(circleLayer.transform,CGFloat(M_PI_4),0,1)

    let rotation = CASpringAnimation(keyPath: "transform")
    rotation.fromValue = NSValue(CATransform3D: circleLayer.transform)
    rotation.toValue = NSValue(CATransform3D: newTransform)
    rotation.damping = 7
    rotation.duration = rotation.settlingDuration
    rotation.delegate = self
    circleLayer.addAnimation(rotation,forKey: nil)

    circleLayer.transform = newTransform
}

这里你用到了 iOS 9 的新类 CASpringAnimation，让 circleLayer 产生 spring 动画。首先拿到 circleLayer 的当前 transform，旋转 45º，作为动画的最终角度并保存到 newTransform 中。

然后新建一个 CASpringAnimation 对象，用 circleLayer 的 tranform 属性作为动画属性。然后设置开始值和终止值，将 damping (阻尼系数)设置为 7（如果你想修改动画效果，可以增加或减少这个值）。最后将 CASpringAnimation 添加到 circleLayer，然后将 ViewController 设为 delegate。

当动画完成你可以让它再次执行以产生循环效果。覆盖这个委托方法以便设置动画完成块。

override func animationDidStop(anim: CAAnimation,finished flag: Bool) {
    animate()
}

最后在 viewDidAppear 方法中开始动画：

animate()

运行项目查看效果：

在开始下一步之前——移除 circleView 的灰色背景，并欣赏一下这个动画的平滑效果。

添加毛玻璃效果

在 iOS Animations by Tutorials 中没有来得及介绍（但想介绍）的一个内容是创建带毛玻璃效果的动画。

你已经有了一个能够运行的圆弧动画，因此我会简单向你展示向这个动画中添加毛玻璃效果。如果你还想了解更多——在本文最后又一个完整的 SwiftSpinner GitHub 项目的链接供你参考。

首先需要几个类变量：

var blurEffect = UIBlurEffect(style: .Dark)
var blurView: UIVisualEffectView!
var vibrancyView: UIVisualEffectView!

首先创建了一个 UIBlurEffecdt——这只是特效的模型，它不会在屏幕上显示任何东西。然后是一个 blurView，它是一个 effectd 视图，用于真正显示模糊（毛玻璃）效果，以及 vibrancyView，用于添加清晰效果。

接下来你需要初始化 effect 视图并将它们添加到 view 视图树中。在 viewDidAppear 最后一行添加毛玻璃的 effect 视图:

blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = view.bounds
view.addSubview(blurView)

这会创建一个新的 effect 视图并用暗色的模糊效果（blurEffect）进行初始化。运行 app 看看效果。

如果你仔细看，你会发现在模糊效果之下有一个圆弧在动。这就对了！

然后我们来在模糊视图上添加清晰效果（毛玻璃镂空效果），在 viewDidAppear 中添加：

let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
vibrancyView = UIVisualEffectView(effect: vibrancyEffect)
vibrancyView.frame = view.bounds
view.addSubview(vibrancyView)

你在原来的模糊效果上面创建了一个清晰效果（vibrancyEffect）。然后创建 effect 视图（vibrancyView）用于显示清晰效果。

现在运行 app 你会发现没有任何不同——因为只会在有内容的情况下生效。所以本文的最后一步是将圆弧动画移到 vibrancyView 中才行。

找到这句并从代码中删除它：

view.addSubview(circleView)

然后在 viewDidAppear 中添加：

vibrancyView.contentView.addSubview(circleView)

这会将圆弧添加到清晰效果的视图中。你可以看看最终效果：

注意在模拟器上清晰效果不正常。你可以在模糊视图之后加入一张图片，然后在真机上运行，就可以看到比较理想的效果。

这是 SwiftSpinner 最终运行在真机上的效果：

SWiftSpinner 库

如果你想看一下我为 Doodle Doodle app 开发的完整的加载动画，你可以用两个方式。

从 GitHub 获得源代码

从这里克隆整个 repo 或者下载 zip：

https://github.com/icanzilb/SwiftSpinner

细节请阅读 README。

以 CocoaPod 方式

至少需要 Cocoapods 0.36（当前是预发布版）——这个版本允许你以 framework 方式使用 Swift 的 cocoapods。

在 Podfile 文件中加入：

pod ‘SwiftSpinner’
install/update 项目的 pod。
在你的 view controller 中添加：

import SwiftSpinner
显示进度：

SwiftSpinner.show(“Connecting…”)

请阅读 cocoadocs 文档。

接下来做什么？

恭喜你！你已经学习了如何制作 CALayer spring 动画以及如何添加毛玻璃的模糊和清晰效果。

如果你想了解更多随机动画的作品，请阅读底下的链接。