iOS绘制动画线条

Question

iOS绘制动画线条

ioscore-graphics

3

我有一个视图，其中有多条水平线（类似于水平刻度盘）。我想要实现水平移动的动画效果。应该是这个样子的：

编辑：

如何做到这一点？据我所知，我不能使用CoreAnimation。此外，我希望能够模拟不同种类的速度。更新方法会怎么工作？我改变绘制时间还是距离？

我知道我可以使用ScrollView来解决这个问题，但我宁愿不使用它。

谢谢！

- Jan

我不完全理解你想做什么。为什么不能使用核心动画？ - David Rönnqvist

也许我没有理解核心动画。据我所知，它可以使视图移动，而不是内部元素。我的想法是显示表盘的边缘，并在旋转表盘时移动线条。因此，这些线条必须始终在一个不动的区域内重复。 - Jan

你能否包含一张图片来展示你想要做的事情（最好是多个帧，以便理解所需动画的意思）？ - David Rönnqvist

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Rönnqvist · Accepted Answer

如果我理解你试图做的事情的话，那么我认为你完全可以使用核心动画来实现。

如果你正在移动的模式就像这样简单，那么你可以在CAShapeLayer上使用线段模式来绘制该模式。我创建了我的层，使其从边界的高度获取线宽，并且形状层的路径从该层的边界获取起始点和结束点：

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

这将生成该图案的静态绘图。代码中的虚线模式是交替显示线条和不显示线条的段落长度。

输入图像描述

绘制路径后，我通过改变线段的“相位”（将其向一个方向或另一个方向移动）来进行动画处理。为了使图案看起来平稳连续地移动，我创建了一个线性重复动画，按其完整长度移动图案：

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

动画线看起来像这样：

enter image description here

如果您想让不同的线以不同的速度动画，可以更改动画的duration。该值表示将一个完整的相位移动动画所需的时间。