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

概述原文： Creating an activity indicator using CAShapeLayer, blur effect and vibrancy 作者：Marin Todorov 译者：kmyhy 这个教程使用 Xcode 7/Swift 2。我在编写 Doodle Doodle app 时曾经准备了大量视频以便向用户知道显示如何使用和安装 Doodle Doodle 键盘扩展。我将

原文：
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 动画(d簧动画)非常简单。让我们来看看如何将 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.centercircleVIEw.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.boundsvIEw.addSubvIEw(blurVIEw)

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

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

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

let vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)vibrancyVIEw = UIVisualEffectVIEw(effect: vibrancyEffect)vibrancyVIEw.frame = vIEw.boundsvIEw.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 动画以及如何添加毛玻璃的模糊和清晰效果。

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

总结

以上是内存溢出为你收集整理的用 CAShapeLayer、毛玻璃镂空效果创建加载动画全部内容，希望文章能够帮你解决用 CAShapeLayer、毛玻璃镂空效果创建加载动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。