几个星期之前，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和添加以下属性和常量到这个类：
- letcirclePathLayer=CAShapeLayer()
- letcircleRadius:CGFloat=20.0
circlePathLayer表示这个圆形路径，而circleRadius表示这个圆形路径的半径。
添加以下初始化代码到CircularLoaderView.swift来配置这个shape layer：
copy