ios开发 方形到圆的动画_使用CAShapeLayer来实现圆形图片加载动画[译]

几个星期之前，Michael Villar在Motion试验中创建一个非常有趣的加载动画。

下面的GIF图片展示这个加载动画，它将一个圆形进度指示器和圆形渐现动画结合。这个组合的效果有趣，独一无二和有点迷人。

这个教程将会教你如何使用Swift和Core Animatoin来重新创建这个效果。让我们开始吧！

基础

首先下载这个教程的启动项目，然后编译和运行。过一会之后，你应该看到一个简单的image显示：

这个启动项目已经预先在恰当的位置将views和加载逻辑编写好了。花一分钟来浏览来快速了解这个项目；那里有一个ViewController，ViewController里有一个命名为CustomImageView的UIImageView子类, 还有一个SDWebImage的方法被调用来加载image。

你可能注意到当你第一次运行这个app的时候，当image下载时这个app似乎会暂停几秒，然后image会显示在屏幕。当然，此刻没有圆形进度指示器 - 你将会在这个教程中创建它！

你会在两个步骤中创建这个动画：

圆形进度。首先，你会画一个圆形进度指示器，然后根据下载进度来更新它。

扩展圆形图片。第二，你会通过扩展的圆形窗口来揭示下载图片。

紧跟着下面步骤来逐步实现！

创建圆形指示器

想一下关于进度指示器的基本设计。这个指示器一开始是空来展示0%进度，然后逐渐填满直到image完成下载。通过设置CAShapeLayer的path为circle来实现是相当简单。

注意：如果你不熟悉CAShapeLayer(或CALayers)的基本概念，可以查看Scott Gardner的CALayer in iOS with Swift文章。

你可以通过CAShapeLayer的strokeStart和strokeEnd属性来控制开始和结束位置的外观。通过改变strokeEnd的值在0到1之间，你可以恰当地填充下载进度。

让我们试一下。通过iOS\Source\Cocoa Touch Class template来创建一个新的文件，文件名为CircularLoaderView。设置它为UIView的子类。

点击Next和Create。新的子类UIView将用来保存动画的代码。

打开CircularLoaderView.swift和添加以下属性和常量到这个类：

let circlePathLayer = CAShapeLayer()

let circleRadius: CGFloat = 20.0

circlePathLayer表示这个圆形路径，而circleRadius表示这个圆形路径的半径。

添加以下初始化代码到CircularLoaderView.swift来配置这个shape layer:

override init(frame: CGRect) {

super.init(frame: frame)

configure()

}

required init(coder aDecoder: NSCoder) {

super.init(coder: aDecoder)

configure()

}

func configure() {

circlePathLayer.frame = bounds

circlePathLayer.lineWidth = 2

circlePathLayer.fillColor = UIColor.clearColor().CGColor