如何用CAShapeLayer实现圆环图片加载动画

  本文翻译自知名iOS教学网站www.raywenderlich.com,原文地址:点击阅读原文,原文是使用swift语言,翻译的时候转换至OC,翻译如有错漏,欢迎斧正.

  这是工程最初运行的样子,就只看到一张图片,如下:

  

  第一次运行的时候,会需要花费几秒钟下载图片,下载完毕后图片就会显示出来,没有任何的加载动画,加载动画就是我们本篇教学的目的.

我们需要通过以下两步来创建加载动画:

1.圆环进度条.首先需要绘制一个圆环,然后依据下载进度来更新圆环

2.圆形放大动画.通过圆形放大动画来展示下载好的图片.

  创建圆环进度条

  基本设计思路:进度条最初是无显示,然后随着图片下载进度逐渐显示,这也是通过CAShapeLayer来绘制圆形的例子.

  首先,声明一个实例和一个常量

@property (strong.noatomic) CAShapeLayer *circlePathLayer;
CGFloat circleRadius = 20;

circlePathLayer是绘制圆环的路径,circleRadius是表示圆角的值.

然后通过一个方法去设置circlePathLayer的初始值:

<span style="font-family:SimSun;">- (void) {
  circlePathLayer.frame = self.view.bounds;
  circlePathLayer.lineWidth = 2;
  circlePathLayer.fillColor = [UIColor.clearColor].CGColor;
  circlePathLayer.strokeColor = [UIColor.redColor].CGColor;
  [self.view.layer addSublayer:circlePathLayer];
</span><pre name="code" class="objc" style="line-height: 18px; font-size: 13px;"><span style="font-family:SimSun;">  circlePathLayer.backgroundColor = [UIColor.whiteColor];</span>

}

  添加路径

  通过以下方法添加路径到layer:

- (CGRect) circleFrame {
  CGRect circleFrame = CGRectMake(0, 0, 2*circleRadius, 2*circleRadius);
  circleFrame.origin.x = CGRectGetMidX(circlePathLayer.bounds) - CGRectGetMidX(circleFrame);
  circleFrame.origin.y = CGRectGetMidY(circlePathLayer.bounds) - CGRectGetMidY(circleFrame);
  return circleFrame;
}

  以上方法返回了一个CGRect,用以创建path.