基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【原创】

http://blog.it985.com/7654.html

初次接触CAShapeLayer和贝塞尔曲线，看了下极客学院的视频。对初学者来说感觉还不错。今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法，创建的简单的圆形进度条的教程

先简单的介绍下CAShapeLayer

1,CAShapeLayer继承自CALayer，可使用CALayer的所有属性

2,CAShapeLayer需要和贝塞尔曲线配合使用才有意义。

Shape：形状

贝塞尔曲线可以为其提供形状，而单独使用CAShapeLayer是没有任何意义的。

3,使用CAShapeLayer与贝塞尔曲线可以实现不在view的DrawRect方法中画出一些想要的图形

关于CAShapeLayer和DrawRect的比较

DrawRect：DrawRect属于CoreGraphic框架，占用CPU，消耗性能大

CAShapeLayer：CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存

贝塞尔曲线与CAShapeLayer的关系

1，CAShapeLayer中shape代表形状的意思，所以需要形状才能生效

2，贝塞尔曲线可以创建基于矢量的路径

3，贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染。路径会闭环，所以绘制出了Shape

4，用于CAShapeLayer的贝塞尔曲线作为Path，其path是一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线

说完了简介们来看一下如何创建一个简单的圆形进度条

这时候我们运行下能看到会有一个圆





现在我们要用到CAShapeLayer的两个参数，strokeEnd和strokeStart

Stroke:用笔画的意思

在这里就是起始笔和结束笔的位置

Stroke为1的话就是一整圈，0.5就是半圈，0.25就是1/4圈。以此类推

如果我们把起点设为0，终点设为0.75

看下运行效果





起点和终点我们可以自己控制了，接下来我们在价格定时器，就可以完成我们的圆形进度条了

加个全局变量add，这是我们每次的递增量

再写个定时器

定时器每次时间到了执行的函数，这个比较简单就不解释了

再来运行下我们来看看效果





奉上Demo，供大家参考。

CircleAnimationTest

原创文章，转载请声明出处。否则将追究法律责任！

如有不对之处欢迎大家指正。

本文永久地址：http://blog.it985.com/7654.html

本文出自 IT985博客 ，转载时请注明出处及相应链接。