iOS绘图线动画 [英] Ios drawing lines animated

问题描述

我有一个视图，其中有多条水平线（如水平表盘）。我想动画水平运动。看起来应该像这样

I have a view in which I have multiple horizontal lines (like a horzontal dial). I want to animate the horizontal movement. It should look like this

编辑：

我该怎么做？据我了解，我无法使用CoreAnimation。此外，我也无法模拟不同的速度。更新方法将如何工作？我要更改绘制时间或距离吗？

How can I do this? As far as I understood I can't use CoreAnimation. Furthermore I wan't to be able to simulate different kinds of speed. How would the updatemethod work? Do I change the draw time, or distance?

我知道我可以使用滚动视图解决此问题，但是我不希望使用它。

I know I could solve this with a scrollview, but I would prefer not to use it.

谢谢！

推荐答案

如果我了解您要做什么，那么我

If I've understood what you are trying to do, then I see no reason why you shouldn't be able to do that using Core Animation.

如果您要移动的图案很简单，则可以使用破折号CAShapeLayer上的图案以绘制图案。我创建了图层，以使其从边界的高度获取线宽，并且形状图层的路径从图层的边界获取其起点和终点：

If the pattern you are moving is as simple as that then you can use a line dash pattern on a CAShapeLayer to draw the pattern. I created my layer so that it gets the line width from the height of the bounds and the shape layer's path gets its start and end points from the bounds of the layer:

CAShapeLayer *lineLayer = [CAShapeLayer layer];
lineLayer.bounds = CGRectMake(0, 0, 200, 60);
lineLayer.position = self.view.center;

lineLayer.strokeColor = [UIColor blackColor].CGColor;
lineLayer.lineDashPattern = @[@5, @2, @2, @2, @2, @2, @2, @2, @2, @2];
lineLayer.lineWidth = CGRectGetHeight(lineLayer.bounds);

UIBezierPath *linePath = [UIBezierPath bezierPath];
[linePath moveToPoint:CGPointMake(0, CGRectGetMidY(lineLayer.bounds))];
[linePath addLineToPoint:CGPointMake(CGRectGetMaxX(lineLayer.bounds), CGRectGetMidY(lineLayer.bounds))];
lineLayer.path = linePath.CGPath;

[self.view.layer addSublayer:lineLayer];

这将产生图案的静态图形。代码中的破折号图案是显示线条和不显示线条的交替段的长度。

That will produce the static drawing of the pattern. The line dash pattern in the code is the length of the alternating segments of where the line is shown and where it is not.

绘制路径后，我通过改变虚线的相位（沿一个方向或另一个方向移动）来制作动画。为了使图案看起来像平滑且连续移动，我创建了一个线性重复动画，将图案移动了整个长度：

With the path drawn, I did the animation by altering the "phase" of the line dashes (shifting them in one direction or the other). To make it seem like the pattern is smoothly and continuously moving I created a linear, repeating animation that shifts the pattern by its full length:

NSNumber *totalDashLenght = [lineLayer.lineDashPattern valueForKeyPath:@"@sum.self"]; // KVC is awesome :)

CABasicAnimation *animatePhase = [CABasicAnimation animationWithKeyPath:@"lineDashPhase"];
animatePhase.byValue = totalDashLenght; // using byValue means that even if the layer has a shifted phase, it will shift on top of that.
animatePhase.duration = 3.0;
animatePhase.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animatePhase.repeatCount = INFINITY;

[lineLayer addAnimation:animatePhase forKey:@"marching ants"];

动画线如下：

如果您想要其他线以不同的速度进行动画制作，您可以更改动画的持续时间。该值表示对一个完整的移相进行动画处理所需的时间。

If you want different lines to animate at different speeds you change the duration of the animation. This value represents the time it takes to animate the shifting one full phase.

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