Change direction in stroke animation - ios

Question

I want to revert the direction of a path drawing. So I changed fromValue and toValue propeties, but now full path is visible at the start of animation and it begins to disappear.
I have the path:
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(213.79, 170.83)];
[bezierPath addCurveToPoint: CGPointMake(131.93, 95) controlPoint1: CGPointMake(212.14, 128.68) controlPoint2: CGPointMake(176.13, 95)];
[bezierPath addCurveToPoint: CGPointMake(50, 173.85) controlPoint1: CGPointMake(86.68, 95) controlPoint2: CGPointMake(50, 130.3)];
[bezierPath addCurveToPoint: CGPointMake(131.93, 252.7) controlPoint1: CGPointMake(50, 217.4) controlPoint2: CGPointMake(86.68, 252.7)];
[bezierPath addCurveToPoint: CGPointMake(157.55, 248.76) controlPoint1: CGPointMake(140.88, 252.7) controlPoint2: CGPointMake(149.49, 251.32)];
[bezierPath addCurveToPoint: CGPointMake(209.69, 281) controlPoint1: CGPointMake(166.59, 267.78) controlPoint2: CGPointMake(186.54, 281)];
[bezierPath addCurveToPoint: CGPointMake(267, 225.85) controlPoint1: CGPointMake(241.34, 281) controlPoint2: CGPointMake(267, 256.31)];
[bezierPath addCurveToPoint: CGPointMake(213.79, 170.83) controlPoint1: CGPointMake(267, 196.71) controlPoint2: CGPointMake(243.53, 172.86)];
[bezierPath closePath];
[color0 setStroke];
bezierPath.lineWidth = 11;
[bezierPath stroke];
And the animation:
UIColor* color = [UIColor colorWithRed: 0.369 green: 0.42 blue: 0.475 alpha: 1];
UIBezierPath *bezierPath = [self bezierPath];
CAShapeLayer *bezier = [[CAShapeLayer alloc] init];
bezier.path = bezierPath.CGPath;
bezier.lineCap = kCALineCapRound;
bezier.strokeColor = color.CGColor;
bezier.fillColor = [UIColor clearColor].CGColor;
bezier.strokeStart = 1.0;
bezier.strokeEnd = 0.0;
bezier.lineWidth = 8.0;
bezier.strokeStart = 0.0;
bezier.strokeEnd = 1.0;
[self.view.layer addSublayer:bezier];
if (animate)
{
CABasicAnimation *animateStrokeEnd = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
animateStrokeEnd.duration = appDelegate.myPlayer.audioPlayer.duration;
animateStrokeEnd.fromValue = [NSNumber numberWithFloat:1.0f];
animateStrokeEnd.toValue = [NSNumber numberWithFloat:0.0f];
[bezier addAnimation:animateStrokeEnd forKey:#"strokeEndAnimation"];
}

Answer 1

You were on the right track but you should have animated the strokeStart property instead.
Start with having both strokeStart and strokeEnd as 1.0.
Then animate strokeStart from 1.0 to 0.0. This will give you the effect of the path being stroked from the end to the start.
For example when 25% of the path is stoked you will have strokeStart at 0.75 and strokeEnd at 1.0.