- 原文链接：如何使用CAShapeLayer实现圆形图像加载器动画
- 原作者：Rounak Jain
- 翻译自：开发技术前沿www.sxzhongrui.com
- 译者：Sam Lau
- 校对者：Lollypo
- 状态：校准完成
几周前，Michael Villar 在 Motion Experiments 中创建了一个非常有趣的加载动画。
下面的 GIF 显示了这个加载动画，它结合了圆形进度指示器和圆形淡入淡出动画。这种组合的效果有趣、独特，而且有点迷人。
本教程将教您如何使用 Swift 和 Core Animatoin 重新创建此效果。开始吧！
基础知识
首先下载本教程的启动工程，然后编译运行。过了一会儿，您应该会看到一个简单的图像显示：
此启动项目在适当的位置预先编写了视图和加载逻辑。花一点时间浏览一下，快速了解该项目；有一个 ViewController，在 ViewController 内部有一个 ，名为 CustomImageView UIImageView子类，还有一个SDWebImage 调用加载图像的方法。
您可能会注意到，当您第一次运行此应用程序时，该应用程序似乎在图像下载时暂停了几秒钟，然后图像出现在屏幕上。当然，目前还没有圆形进度指示器 - 您将在本教程中创建它！
您将分两步创建此动画：
- 循环进度。首先，您将绘制一个圆形进度指示器，然后根据下载进度更新它。
- 展开圆形图片。其次，您将通过扩展的圆形窗口显示下载的图像。
按照以下步骤一步步实现吧！
创建圆形指示器
考虑进度指示器的基本设计。该指示器开始为空，显示 0% 进度，然后逐渐填满，直到图像下载完成。通过将 CAShapeLayer 的 路径 设置为圆形来实现这一点相当简单。
注意：如果您不熟悉CAShapeLayer（或CALayers）的基本概念，您可以查看 Scott Gardner 的 CALayer in iOS with Swift 文章。
您可以通过 CAShapeLayer 的 行程Start 和 行程End 属性控制开始和结束位置的外观。通过将 StrokeEnd 的值更改为 0 到 1 之间，您可以适当填充下载进度。
我们来试试吧。使用 iOS\Source\Cocoa Touch Class 模板 创建一个名为 CircularLoaderView 的新文件。将其设置为 UIView 的子类。
单击下一步和创建。新的子类UIView将用于保存动画代码。
打开CircularLoaderView.swift并向此类添加以下属性和常量：
让circlePathLayer = CAShapeLayer()
让circleRadius: CGFloat = 20.0
circlePathLayer表示此圆形路径，circleRadius表示此圆形路径的半径。
将以下初始化代码添加到CircularLoaderView.swift来配置此形状图层：
覆盖 init(frame: CGRect) {
super.init(frame:frame)
配置()
}
必需的 init(编码器 aDecoder: NSCoder) {
super.init(编码器：aDecoder)
配置()
}
func 配置() {
CirclePathLayer.frame = 边界
CirclePathLayer.lineWidth = 2
CirclePathLayer.fillColor = UIColor.clearColor().CGColor
CirclePathLayer.linesColor = UIColor.redColor().CGColor
layer.addSublayer(circlePathLayer)
背景颜色 = UIColor.whiteColor()
}
两种初始化方法都会调用configure方法。 configure 方法将形状图层的线宽设置为 2，填充颜色设置为透明，描边颜色设置为红色。将circlePathLayer 添加到视图的主层。然后将视图的 backgroundColor 设置为白色，然后当图像加载时，屏幕的其余部分将被忽略。
