用 CAShapeLayer、毛玻璃镂空效果创建加载动画
这个教程使用 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，旋转 45o，作为动画的最终角度并保存到 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。
请阅读 cocoadocs 文档。 接下来做什么？恭喜你！你已经学习了如何制作 CALayer spring 动画以及如何添加毛玻璃的模糊和清晰效果。 如果你想了解更多随机动画的作品，请阅读底下的链接。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |