iOS开发：CAShapeLayer画圈：strokeEnd

说明：动画只是一个对layer的过程按帧显示，事实上frame是一次变化的

原理：使用UIBezierPath创建路径（一个整圆）＋CAShapeLayer的strokeEnd属性 （结束点＋动画）-->得到动画画圈效果

动画效果

---

1、属性说明

CAShapeLayer.h

@property CGFloat strokeStart;//画圈起点，默认0，支持动画

@property CGFloat strokeEnd;//画圈结束点，默认1，支持动画

---

2、代码部分（属性显示：不带动画）

CAShapeLayer *shapeLayer = [CAShapeLayer layer];

shapeLayer.frame = _demoView.bounds;

shapeLayer.strokeEnd = 0.7f;//结束点

shapeLayer.strokeStart = 0.1f;//开始点

//得到路径

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:_demoView.bounds];

shapeLayer.path = path.CGPath;

shapeLayer.fillColor = [UIColor clearColor].CGColor; //Layer 的填充色

shapeLayer.lineWidth = 2.0f;//宽度

shapeLayer.strokeColor = [UIColor redColor].CGColor;//边框色

//将CAShaperLayer放到某个层上显示

[_demoView.layer addSublayer:shapeLayer];

我们通过以上代码设置：strokeStart=0.1f; strokeEnd=0.7f

3、实现圆形进度条的实现代码（动画）

CAShapeLayer *shapeLayer = [CAShapeLayer layer];

shapeLayer.frame = _demoView.bounds;

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:_demoView.bounds];

shapeLayer.path = path.CGPath;

shapeLayer.fillColor = [UIColor clearColor].CGColor;//Layer 的填充色

shapeLayer.lineWidth = 2.0f;//宽度

shapeLayer.strokeColor = [UIColor redColor].CGColor;//边框色

[_demoView.layer addSublayer:shapeLayer];

CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

pathAnima.duration = 3.0f;//动画时间

pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];//开始点

pathAnima.toValue = [NSNumber numberWithFloat:1.0f];//结束点

pathAnima.fillMode = kCAFillModeForwards;

pathAnima.removedOnCompletion = NO;

[shapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];

我们通过以上代码设置：strokeStart=0.1f; strokeEnd=1.0f，带动画效果

---

CABasicAnimation的“转圈”动画

引导页的跳过

1、确定动画轨迹

CGFloat w = CGRectGetWidth(frame);

CGFloat h = CGRectGetHeight(frame);

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(w/2, h/2)radius:MIN(w, h)/2 startAngle:-M_PI_2  endAngle:3 * M_PI_2  clockwise:YES];

2、创建动画

// 倒计时的时间

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];

animation.duration = 3;

animation.fromValue = @(0.f);

animation.toValue = @(1.f);

animation.removedOnCompletion = NO;

animation.fillMode = kCAFillModeBoth;

3、CAShapeLayer添加动画

CAShapeLayer *shapeLayer = [CAShapeLayer layer];

shapeLayer.fillColor = [UIColor clearColor].CGColor;

shapeLayer.strokeColor = [UIColor colorWithRed:0.02f green:0.69f blue:1.00f alpha:1.00f].CGColor;

shapeLayer.lineWidth = 1.0;

[self.layer addSublayer:shapeLayer];

shapeLayer.path = path.CGPath;

[shapeLayer addAnimation:animation forKey:nil];

---

CABasicAnimation使用总结，UIBezierPath介绍, CAAnimation——基本动画，关键帧动画和贝塞尔路径

学无止境，做个记录

2017-01-12-SXH