在笔画动画中改变方向答案

【问题标题】：Change direction in stroke animation在笔画动画中改变方向
【发布时间】：2013-05-10 17:01:29
【问题描述】：

我想恢复路径绘制的方向。所以我改变了 fromValue 和 toValue 属性，但现在完整路径在动画开始时可见并且它开始消失。我有路径：

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

【问题讨论】：

标签： ios core-animation core-graphics uibezierpath cabasicanimation

【解决方案1】：

您在正确的轨道上，但您应该为 strokeStart 属性设置动画。

首先将 strokeStart 和 strokeEnd 都设置为 1.0。

然后动画strokeStart 从 1.0 到 0.0。这将为您提供从末端到起点的路径效果。

例如，当 25% 的路径被激发时，strokeStart 的值为 0.75，strokeEnd 的值为 1.0。

【讨论】：