스트로크 애니메이션의 방향 변경

Question

경로 드로잉의 방향을 되돌리려합니다. 그래서 fromValue와 toValue propeties를 바꿨지 만 이제는 애니메이션의 시작 부분에서 전체 경로를 볼 수 있으며 사라집니다. 나는 경로가 있습니다

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]; 

그리고 애니메이션 :

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

당신은 바른 길에 있었다를하지만, 대신 strokeStart 속성을 애니메이션 있어야합니다.

strokeStart 및 strokeEnd을 모두 1.0으로 시작하십시오.

나서 1.0 에 0.0 strokeStart 애니메이션. 이것은 끝에서 시작까지 쓰다듬어 진 경로의 효과를 줄 것입니다.

예를 들어 경로의 25 %가 휘몰아 치면 0.75의 strokeStart와 1.0의 strokeEnd가됩니다.