使用Quart2D设置路径动画的过程

Question

我刚开始使用Quartz2D，为了从小到大，我想画一条线，但从头到尾都要让这条线有动画效果。从我读过的博客和我看过的类似问题来看，我似乎需要为图层设置一条路径，并在该图层上设置动画。对我来说问题是，即使一个层有一个路径属性，我也不确定如何正确地为它设置一个路径。

我有一个UIView显示，如果我注释掉动画代码，它会很好地显示一行。

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetLineWidth(context, 2.0);

CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();

CGFloat components[] = {0.0, 0.0, 1.0, 1.0};

CGColorRef color = CGColorCreate(colorspace, components);

CGContextSetStrokeColorWithColor(context, color);

CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, 300, 400);

CGContextStrokePath(context);
CGColorSpaceRelease(colorspace);
CGColorRelease(color);

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 10.0;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
//[aLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];

要从头到尾为一条线添加动画，我需要做些什么？

Answer 1

这是我用来绘制一条线的动画，当然一定要导入Quartz：

//Create the bezier path that will hold all the points of data
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[[UIColor greenColor] setFill];
[bezierPath fill];
[[UIColor redColor] setStroke];
[bezierPath stroke];

for (int i = 10 ; i < 20; i++) {
    //If its the first point we need to make sure and move to that point not add to it
    if (i == 10)
        [bezierPath moveToPoint: CGPointMake(10, 10)];
    else
        [bezierPath addLineToPoint: CGPointMake(i * 2, i * 3)];
}


CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
shapeLayer.fillColor = nil;
shapeLayer.lineWidth = 10.0f;
shapeLayer.lineJoin = kCALineJoinRound;
shapeLayer.path = bezierPath.CGPath;

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 10.0;
pathAnimation.fromValue = @(0.0f);
pathAnimation.toValue = @(1.0f);

[shapeLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

[self.view.layer addSublayer:shapeLayer];