动画绘制线条 [英] Animating the drawing of a line

问题描述

我正尝试通过以下方式为线条绘制动画：

I'm trying to animate the drawing of a line by the following way:

CAShapeLayer *rootLayer;
CAShapeLayer *lineLayer;
CGMutablePathRef path;

.m

.m

 path = CGPathCreateMutable();
 CGPathMoveToPoint(path, nil, self.frame.size.width/2-100, 260);
 CGPathAddLineToPoint(path, nil, self.frame.size.width/2+100.0, 260);    
 CGPathCloseSubpath(path);

 self.rootLayer = [CALayer layer];
 rootLayer.frame = self.bounds;
[self.layer addSublayer:rootLayer];

 self.lineLayer = [CAShapeLayer layer];
[lineLayer setPath:path];
[lineLayer setFillColor:[UIColor redColor].CGColor];
[lineLayer setStrokeColor:[UIColor blueColor].CGColor];
[lineLayer setLineWidth:1.5];
[lineLayer setFillRule:kCAFillRuleNonZero];
[rootLayer addSublayer:lineLayer];

[self performSelector:@selector(startTotalLine) withObject:nil afterDelay:1.5];

- (void)startTotalLine
{    
      CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"animatePath"];
      [animation setDuration:3.5];
       animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
      [animation setAutoreverses:NO];
      [animation setFromValue:(id)path];
      [animation setToValue:(id)path];
      [lineLayer addAnimation:animation forKey:@"animatePath"];    
}

该行已在 startTotalLine 方法。
此外， startTotalLine 方法不会影响该行。

The line had drawn before the startTotalLine method is invoked. Also, the startTotalLine method doesn't affect the line.

我希望它能够动画化从右到左的线条画。

I want it to animate the the line drawing from right to left.

推荐答案

我认为做你想做的最简单的方法是提出一些UIView高度为1.5像素，并为其宽度设置动画。问我是否不清楚。

I think the easiest way to do what you want, is to present some UIView that is 1.5 pixel height and animate it's width. Ask me if I'm not clear.

我认为你的代码不起作用，因为你的变量 path 是不是图层属性。阅读手册：

I think your code doesn't work because your variable path is not a layer property. Read manuals:

CABasicAnimation为图层属性提供基本的单关键帧动画
功能。

CABasicAnimation provides basic, single-keyframe animation capabilities for a layer property.

你在这里做了一些奇怪的事情：

And you do something strange here:

[animation setFromValue:(id)path];
[animation setToValue:(id)path];

编辑：
我偶然发现文章，并了解您尝试实现的目标！现在我认为你失败的原因是你可以设置不改变点数的路径动画。而现在我认为你可以创建一个有两个点的路径。起初他们在同一个地方，另一条路是你想要最终的路线。现在从第一条路径动画到第二条路径。我认为它应该有效，但我不确定。

I stumbled upon an article, and understood what you were try to achieve! Now I think the reason you failed is that you can animate path that doesn't change number of points. And now I thought you can create a path-line with two points. At first they are at same place and another path is the line you want to end up with. Now animate from first path to the second. I think it should work, but I'm not sure.

编辑：
绝对可以！你需要这个人的代码。 Git链接。

这篇关于动画绘制线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！