动画线的最简单方法是什么？ [英] What's the easiest way to animate a line?

问题描述

我正在创建一个应用程序，该应用程序涉及在一段时间内在工作区内设置动画线。我目前的做法是在 drawRect 中使用这样的代码：

I am creating an app that involves animating lines within a workspace over time. My current approach for this is to use code like this in drawRect:

CGContextSetStrokeColor(context, black);
CGContextBeginPath(context);
CGContextMoveToPoint(context, startPoint.x, startPoint.y);
CGContextAddLineToPoint(context, finalPoint.x, finalPoint.y);
CGContextStrokePath(context);

...然后只设置一个计时器每0.05秒运行一次以更新 finalPoint 并调用 setNeedsDisplay 。

...and then just setting a timer to run every 0.05 seconds to update finalPoint and call setNeedsDisplay.

我找到了这种方法（当时有5条线路一次移动）使应用程序变得非常缓慢，即使刷新频率如此之高，仍然会显得生涩。

I'm finding this approach (when there's 5ish lines moving at once) slows down the app terribly, and even with such a high refresh frequency, still appears jerky.

必须有更好的方法在动画线中执行这个非常简单的线条绘制 - 即说我想要一条线从x1，y1开始并延伸到x2 ，y2超过给定的时间长度。我有什么选择？我需要让这个表演更快，并且想要摆脱这个笨重的计时器。

There must be some better way to perform this very simple line drawing in an animated line - i.e. saying that I want a line to start at x1, y1 and stretching to x2, y2 over a given length of time. What are my options for this? I need to make this perform faster and would love to get rid of this clunky timer.

谢谢！

推荐答案

使用CAShapeLayers，以及CATransactions和CABasicAnimation的组合。

Use CAShapeLayers, and a combination of CATransactions and CABasicAnimation.

您可以将给定路径添加到shapeLayer并让它执行渲染。

You can add a given path to a shapeLayer and let it do the rendering.

CAShapeLayer对象有两个属性叫做 strokeStart 和 strokeEnd ，它定义了行的末尾应该呈现的路径。对于 strokeStart ，默认值为0.0;对于 strokeEnd ，默认值为1.0。

A CAShapeLayer object has two properties called strokeStart and strokeEnd, which defines where along the path the end of the line should render. The defaults are 0.0 for strokeStart, and 1.0 for strokeEnd.

如果您设置路径以便 strokeEnd 最初从0.0开始，您将看不到任何行。

If you set up your path so that strokeEnd initially starts at 0.0, you will see no line.

然后，您可以在0.0到1.0之间设置 strokeEnd 属性的动画，您将看到该行延长。

You can then animate, from 0.0 to 1.0, the strokeEnd property and you will see the line lengthen.

要更改CAShapeLayer的隐式0.25s默认动画时序，您可以向该类添加一个函数，如下所示：

To change CAShapeLayer's implicit 0.25s default animation timing, you can add a function to the class, like so:

-(void)animateStrokeEnd:(CGFloat)_strokeEnd {
    [CATransaction begin];
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:keyPath];
    animation.duration = 2.0f; //or however long you want it to happen
    animation.fromValue = [NSNumber numberWithFloat:self.strokeEnd]; // from the current strokeEnd value
    animation.toValue = [NSNumber numberWithFloat:_strokeEnd]; //to the end of the path
    [CATransaction setCompletionBlock:^{ self.strokeEnd = _strokeEnd }];
    [self addAnimation:animation forKey:@"animateStrokeEnd"];
    [CATransaction commit];
}

您可以将任何值从0.0f传递到1.0f作为<的值code> _strokeEnd 。

You can pass any value from 0.0f to 1.0f as the value of _strokeEnd.

setCompletionBlock：确保你的价值在动画完成后显式设置传递。

The setCompletionBlock: ensures that the value you are passing is explicitly set after the animation completes.

这篇关于动画线的最简单方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！