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

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




 

初次接触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是一个首尾相接的闭环的曲线,即使该贝塞尔曲线不是一个闭环的曲线

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

1

2

//创建全局属性的ShapeLayer

@property (nonatomic, strong) CAShapeLayer *shapeLayer;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

- (void)viewDidLoad {

    [super viewDidLoad];

     

    //创建出CAShapeLayer

    self.shapeLayer = [CAShapeLayer layer];

    self.shapeLayer.frame = CGRectMake(0, 0, 200, 200);//设置shapeLayer的尺寸和位置

    self.shapeLayer.position = self.view.center;

    self.shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色为ClearColor

     

    //设置线条的宽度和颜色

    self.shapeLayer.lineWidth = 1.0f;

    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;

     

    //创建出圆形贝塞尔曲线

    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];

     

    //让贝塞尔曲线与CAShapeLayer产生联系

    self.shapeLayer.path = circlePath.CGPath;

     

    //添加并显示

    [self.view.layer addSublayer:self.shapeLayer];

}

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


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

Stroke:用笔画的意思

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

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

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

1

2

3

//设置stroke起始点

self.shapeLayer.strokeStart = 0;

self.shapeLayer.strokeEnd = 0.75;

看下运行效果


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

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

1

2

3

4

@interface ViewController ()

{

    double add;

}

再写个定时器

1

2

3

4

5

6

7

add = 0.1;//每次递增0.1

//用定时器模拟数值输入的情况

    _timer = [NSTimer scheduledTimerWithTimeInterval:0.1

                                              target:self

                                            selector:@selector(circleAnimationTypeOne)

                                            userInfo:nil

                                             repeats:YES];

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

- (void)circleAnimationTypeOne

{

    if (self.shapeLayer.strokeEnd > 1 && self.shapeLayer.strokeStart < 1) {

        self.shapeLayer.strokeStart += add;

    }else if(self.shapeLayer.strokeStart == 0){

        self.shapeLayer.strokeEnd += add;

    }

     

    if (self.shapeLayer.strokeEnd == 0) {

        self.shapeLayer.strokeStart = 0;

    }

     

    if (self.shapeLayer.strokeStart == self.shapeLayer.strokeEnd) {

        self.shapeLayer.strokeEnd = 0;

    }

}

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



你可能感兴趣的:(基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【原创】)