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

前端之家收集整理的这篇文章主要介绍了用 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 动画以及如何添加毛玻璃的模糊和清晰效果

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

原文链接:https://www.f2er.com/swift/320884.html

猜你在找的Swift相关文章