Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animate drawing arc with UIBezierPath

I have drawn an arc using:

- (void)drawRect:(CGRect)rect {
    UIBezierPath *stripePath = [UIBezierPath bezierPath];
    [arcColor set];
    [stripePath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:clockwise];
    stripePath.lineWidth = arcWidth;
    stripePath.lineCapStyle = kCGLineCapRound;
    stripePath.lineJoinStyle = kCGLineCapRound;
    [stripePath stroke];
}

Now I want to animate this arc by the angle.

I am trying it with something like:

angle = startAngle;
[UIView animateWithDuration:1
                      delay:0
                    options:UIViewAnimationOptionCurveEaseInOut
                 animations:^{
                     angle = endAngle;
                     [stripePath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:angle clockwise:clockwise];
                     [stripePath stroke];
}];

However no animation is being displayed on screen. How to animate the arc with the angle as the changing variable? Thanks.

like image 530
Wingzero Avatar asked Mar 18 '15 06:03

Wingzero


1 Answers

Below code achieved my goal:

UIBezierPath *stripePath = [UIBezierPath bezierPath];
[arcColor set];
stripePath.lineWidth = arcWidth;
stripePath.lineCapStyle = kCGLineCapRound;
stripePath.lineJoinStyle = kCGLineCapRound;
[stripePath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:clockwise];

[_stripeLayer setPath:stripePath.CGPath];
[_stripeLayer setStrokeColor:arcColor.CGColor];
[_stripeLayer setFillColor:[UIColor clearColor].CGColor];
[_stripeLayer setLineWidth:arcWidth];
[_stripeLayer setStrokeStart:0.0];
[_stripeLayer setStrokeEnd:1.0];
[_stripeLayer setLineCap:kCALineCapRound];
[_stripeLayer setLineJoin:kCALineCapRound];

if ([_stripeLayer superlayer]) {
    [_stripeLayer removeAllAnimations];
    [_stripeLayer removeFromSuperlayer];

}
[self.layer addSublayer:_stripeLayer];

CABasicAnimation *animateStrokEnd = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animateStrokEnd.duration = 1;
animateStrokEnd.fromValue = [NSNumber numberWithFloat:0.0];
animateStrokEnd.toValue = [NSNumber numberWithFloat:1.0];
[_stripeLayer addAnimation:animateStrokEnd forKey:nil];
like image 52
Wingzero Avatar answered Nov 09 '22 10:11

Wingzero