ios使用CAShapeLayer，UIBezierPath，CABasicAnimation 画百分比圆圈

原创

于 2019-04-22 23:09:02 发布 · 725 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用CAShapeLayer和CABasicAnimation在iOS应用中创建从12点方向开始的动画效果。通过调整strokeStart和strokeEnd属性，并利用UIBezierPath和CGPath来定义动画路径，实现了一个动态变化的圆形进度条动画。

1. 普通的用法（先学习咋用）

代码如下

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = CGRectMake(50, 50, 150, 150);
    shapeLayer.strokeEnd = 1.0f;
    shapeLayer.strokeStart = 0.0f;
    shapeLayer.lineWidth     = 10;          //设置线宽
    shapeLayer.lineCap       = kCALineCapRound;    //设置线头形状
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:shapeLayer.frame];
    shapeLayer.path = path.CGPath;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillRule       = kCAFillRuleEvenOdd;  //重点， 填充规则
    
    CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnima.duration = 10.0f;				//动画时间
    pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];      //动画的运动曲线
    pathAnima.fromValue = [NSNumber numberWithFl