(译)CAShapeLayer实现圆形图片读取动画

  译自RAYWENDERLICH,How To Implement A Circular Image Loader Animation with CAShapeLayer

项目初始状态,已经有一个imageview和图片下载设定,使用swift语言:


动画实现思路分两步:

1.圆形进度条,根据图片下载进度显示进度条。

2.圆形放大动画,通过动画逐步显示图片。

设置圆形进度条

新建一个UIView的子类CircularLoaderView,添加以下属性:

let circlePathLayer = CAShapeLayer()

let circleRadius: CGFloat = 20.0

当circleRadius等于圆形路径的半径,circlePathLayer就相当于圆形路径。

自定义初始化方法:

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

circlePathLayer.strokeColor = UIColor.redColor().CGColor

layer.addSublayer(circlePathLayer)

backgroundColor = UIColor.whiteColor()

}

自定义了一个configure方法,在两个继承的初始化中都调用configure来进行正确的初始化。

添加路径

添加以下方法来为layer创建路径:

func circleFrame() -> CGRect {

var circleFrame = CGRect(x: 0, y: 0, width: 2*circleRadius, height: 2*circleRadius)

circleFrame.origin.x = CGRectGetMidX(circlePathLayer.bounds) - CGRectGetMidX(circleFrame)

circleFrame.origin.y = CGRectGetMidY(circlePathLayer.bounds) - CGRectGetMidY(circleFrame)

return circleFrame

}

  这个方法返回了一个CGRect,以circlePathLayer为基础创建的一个CGRect。然后,用以下方法来创建具体的路径:

func circlePath() -> UIBezierPath {

return UIBezierPath(ovalInRect: circleFrame())

}

这个方法以circleFrame为基础返回了一个圆形的UIBezierPath。因为layer是没有autoresizingMask属性的,所以需要重写方法来更新circlePathLayer的frame:

override func layoutSubviews() {

super.layoutSubviews()

circlePathLayer.frame = bounds

circlePathLayer.path = circlePath().CGPath

}

现在打开CustomImageView.swift,添加CircularLoaderView属性:

let progressIndicatorView = CircularLoaderView(frame: CGRectZero)

在init(coder:)方法中添加以下设置代码:

addSubview(self.progressIndicatorView)

progressIndicatorView.frame = bounds

progressIndicatorView.autoresizingMask = .FlexibleWidth | .FlexibleHeight

这里实现了把圆形进度view添加到imageview中,autoresizingMask保证了当圆形进度view可以保持正确的尺寸。这时候运行,可以看到一个红色空心圆圈:


更改绘制长度

回到CircularLoaderView.swift,添加以下代码:

var progress: CGFloat {

get {

return circlePathLayer.strokeEnd

}

set {

if (newValue > 1) {

circlePathLayer.strokeEnd = 1

} else if (newValue < 0) {

circlePathLayer.strokeEnd = 0

} else {

circlePathLayer.strokeEnd = newValue

}

}

}

在configure()添加以下代码:

progress = 0

运行项目,应该只能看到一片空白,这就对了,progress设为0,即strokeEnd为0,所以不会绘制circlePathLaye。

回到CustomImageView.swift,在下载图片方法的回调中添加:

self!.progressIndicatorView.progress = CGFloat(receivedSize)/CGFloat(expectedSize)

通过receivedSize和expectedSize计算出已下载进度。这时候运行项目,会看到一个慢慢增加的圆形进度条。

创建展示动画

动画展示阶段通过一个不断扩大的圆来展示下载好的图片。把以下添加添加到CircularLoaderView.swift:

func reveal() {

// 1

backgroundColor = UIColor.clearColor()

progress = 1

// 2

circlePathLayer.removeAnimationForKey("strokeEnd")

// 3

circlePathLayer.removeFromSuperlayer()

superview?.layer.mask = circlePathLayer

}

以上代码的作用:

1.清除背景颜色,那么背后的图片就可以得到展示,把progress设为1

2.移除所有针对strokeEnd属性的动画

3.把circlePathLayer从父layer移除,把它设置为父layer的mask,这样就可以从圆形中看到图片。

在CustomImageView.swift中调用该方法:

self!.progressIndicatorView.reveal()

现在运行项目的效果,可以从圆形条中看到些少图片:


圆形放大

下一步是同时把圆形向外和向内放大,这样的话,需要两个同心的UIBezierPath,但是我们可以以更有效的方法-一个UIBezierPath就搞定。

首先,增加圆的半径达到向外放大,同时增加线条的宽度使得圆看起来向内收缩变小了。最终,达到展示图片的效果,在reveal()方法中添加以下代码:

// 1

let center = CGPoint(x: CGRectGetMidX(bounds), y: CGRectGetMidY(bounds))

let finalRadius = sqrt((center.x*center.x) + (center.y*center.y))

let radiusInset = finalRadius - circleRadius

let outerRect = CGRectInset(circleFrame(), -radiusInset, -radiusInset)

let toPath = UIBezierPath(ovalInRect: outerRect).CGPath

// 2

let fromPath = circlePathLayer.path

let fromLineWidth = circlePathLayer.lineWidth

// 3

CATransaction.begin()

CATransaction.setValue(kCFBooleanTrue, forKey: kCATransactionDisableActions)

circlePathLayer.lineWidth = 2*finalRadius

circlePathLayer.path = toPath

CATransaction.commit()

// 4

let lineWidthAnimation = CABasicAnimation(keyPath: "lineWidth")

lineWidthAnimation.fromValue = fromLineWidth

lineWidthAnimation.toValue = 2*finalRadius

let pathAnimation = CABasicAnimation(keyPath: "path")

pathAnimation.fromValue = fromPath

pathAnimation.toValue = toPath

// 5

let groupAnimation = CAAnimationGroup()

groupAnimation.duration = 1

groupAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

groupAnimation.animations = [pathAnimation, lineWidthAnimation]

groupAnimation.delegate = self

circlePathLayer.addAnimation(groupAnimation, forKey: "strokeWidth")

一步步来解释以上代码的作用:

1.计算好可以包含imageview在内的圆的半径,然后再计算可以包含圆的正方形。topath就是CAShapeLayer最终的样子:


2.设置好lineWidth和path的值

3.lineWidth和path的值要设置为最终值,以免动画结束后又返回原始值。

4.创建两个动画,一个是path的,一个是linewidth的。

5.创建一个CAAnimationGroup管理动画,把CAAnimationGroup添加给layer,同时设置self为代理。

运行项目,可以看到展示动画,但是动画完成后,有一部分layer还残留在屏幕上:


这时需要以下代码解决:

override func animationDidStop(anim: CAAnimation!, finished flag: Bool) {

superview?.layer.mask = nil

}

大功告成!完整项目代码请前往原文地址下载。

推荐阅读更多精彩内容