CODEWITHSUNDEEP
iosanimationcore-animationquartz-corecabasicanimation
Kasper Sølvstrøm
Kasper Sølvstrøm

Reputation: 280

Animated Piechart fillmode?

im animating the stroke of a circle and it looks something like

dribbble.com/shots/560534-Countdown/attachments/42066?project_id=57064

i´m making a circle for a background, then i use the same path with thinner stroke to the animation path

CAShapeLayer *minutesBackground = [CAShapeLayer layer];
minutesBackground.path=[UIBezierPath bezierPathWithArcCenter:CGPointMake((screenWidth/2), (radiusMinutes+spacing)) radius:radiusMinutes startAngle:2*M_PI*0-M_PI_2 endAngle:2*M_PI*1-M_PI_2 clockwise:YES].CGPath;
minutesBackground.fillColor = clear;
minutesBackground.strokeColor = [UIColor blackColor].CGColor;
minutesBackground.lineWidth = minutesWidth+2;

minutesCircle = [CAShapeLayer layer];
minutesCircle.path=minutesBackground.path;
minutesCircle.fillColor=clear;
minutesCircle.strokeColor=[UIColor orangeColor].CGColor;
minutesCircle.lineWidth = minutesWidth;    
minutesCircle.shadowRadius = 2;
minutesCircle.shadowColor = [UIColor orangeColor].CGColor;
minutesCircle.shadowOpacity = 5;
minutesCircle.shadowOffset = CGSizeMake(0.0, 0.0);

the animation is something i´ve found on the interwebs :)

minutesAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
minutesAnimation.duration = work;
minutesAnimation.repeatDuration=work;
minutesAnimation.removedOnCompletion=YES;
minutesAnimation.fillMode = kCAFillModeRemoved;
minutesAnimation.fromValue=@(0);
minutesAnimation.toValue=@(1);
minutesAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[minutesCircle addAnimation:minutesAnimation forKey:@"drawCircleAnimation"];

if i set it to repeat for a duration, it has the desired effect, it draws, in the end it´s removed, and it draws again.

However, i have a button that pops up on animation completion, at the press of that button, i disable it and sets its alpha to 0.0 to hide it, and restart the timer.

when i restart the timer, the previously drawed circle is still there. (some thread issue maybe?)

any help appreciated, not sure if i shared enough code.. let me know if more would help my case :)

Upvotes: 0

Views: 128

Answers (1)

Rob
Rob

Reputation: 437862

Are you trying to have the minutesCircle disappear once the animation is done?

If so, the issue is that you've defined your minutesCircle with the default values for strokeStart (0.0) and strokeEnd (1.0). The minutesAnimation is animating the changing of strokeEnd from 0.0 to 1.0. But, when the animation completes and is removed (because you've specified removedOnCompletion of YES and fillMode of kCAFillModeRemoved), the strokeEnd of the minutesCircle reverts back to it's original value, 1.0 (which means the orange arc will remain visible when animation is removed).

If you want it to make minutesCircle not visible once the animation is done, when you first create the minutesCircle, specify that both strokeStart and strokeEnd are 0:

minutesCircle.strokeStart = 0.0;
minutesCircle.strokeEnd = 0.0;

Now, when your animation completes and is removed, the strokeEnd of minutesCircle will revert to value it was originally, i.e. 0.0, i.e. making the orange stroke no longer visible.

Upvotes: 1

Related Questions