如何在持续时间内为线条设置动画？答案

【问题标题】：How to animate a line over duration?如何在持续时间内为线条设置动画？
【发布时间】：2015-03-22 03:51:56
【问题描述】：

我是开发 iOS 游戏的新程序员，我想编写一条动画线来引导用户将对象从 A 点拖到 B 点。所以我希望这条线开始（长度 = 0）点 A 并将其自身设置为动画（例如长度 = 100 像素）到点 B。

我正在使用 SKShapeNode，目前要对其进行“动画化”，我实际上是通过“更新”方法重新创建每一帧的线，该方法具有一个取决于 currentTime 的变量，以使线的长度变得越来越长，直到达到使用以下代码所需的长度（请注意，该行是虚线）：

但是，我遇到了几个性能问题，当我修复这些问题时，会引发更多问题。我需要避免让对象的长度成为从“-(void)update:(CFTimeInterval)currentTime”经过的时间的函数。相反，我希望有一种方法可以调用来为这条线设置动画 - 我正在阅读并觉得这可能可以通过 CoreAnimations 实现（比如这里的 CABasicAnimation Ios drawing lines animated），但我不确定如何实现这一点。任何正确方向的帮助或指导将不胜感激 - 谢谢。让我知道我是否可以提供任何额外的信息或解释！

-(void)drawLine : (CGFloat)ratio 
{


    CGPoint StartPoint = CGPointMake(0,0)
    CGPoint FinishPoint = CGPointMake(100,50);
    CGPoint AnimatedPoint = CGPointMake(FinishPoint.x*ratio +StartPoint.x*(1-ratio)+1, FinishPoint.y*ratio+StartPoint.y*(1-ratio)+1);

    CGFloat pattern[2];
    pattern[0] = self.size.height/30; //length of first pattern
    pattern[1] = self.size.height/30; //length of second pattern

    UIBezierPath *bezierPath=[UIBezierPath bezierPath];
    [bezierPath moveToPoint:StartPoint];
    [bezierPath addLineToPoint:AnimatedPoint];

    CGPathRef dashed =
    CGPathCreateCopyByDashingPath([bezierPath CGPath],
                                  NULL,
                                  0,
                                  pattern,
                                  2);
    lineDrawn.path = dashed; //this is of type SKShapeNode
    CGPathRelease(dashed);
}

【问题讨论】：

你会考虑用精灵为线条制作动画吗？例如，有 20 个线条生长的精灵，然后使用这些精灵制作动画？由于您使用的是 spritekit，这可能是最有效的方式。取决于它是否符合您的需求。
如果您只是画一条直线，您可能需要考虑使用一个带有中心矩形的 SKTexture 并将其更改为 xScale。你甚至可以使用 SKAction。请参阅调整 Sprite 的大小developer.apple.com/library/ios/documentation/GraphicsAnimation/… 您可能想要更改 sprite 的锚点，并且需要更改旋转以匹配起点和终点，但这可能是另一种选择，并为您提供所需的性能。
Is it possible to draw a line with SpriteKit animated?的可能重复

标签： ios animation sprite-kit core-animation

【解决方案1】：

是的，您可以（并且可能应该）使用 Core Animation，而不是尝试在循环中绘制线条。

您要做的是创建一个 CAShapeLayer。您将从 UIBezierPath 安装 CGPath 作为形状层中的路径，并将形状层添加为视图层次结构中某些视图层的子层。

然后，您将创建一个 CABasicAnimation，它将形状图层的 strokeEnd 属性从 0（结束 = 开始：未绘制线）动画到 1.0（从开始到结束完全绘制的线。

这是一种非常常见的技术。您应该能够在“CAShapeLayer CABasicAnimation strokeEnd”上进行谷歌搜索，并找到或多或少地完成您需要做的事情的示例。如果您找不到任何东西，请告诉我，我会为您指明正确的方向。

【讨论】：

是的。短版：提供到 CAShapeLayer 的完整贝塞尔路径，然后在 strokeStart 或 strokeEnd 属性上设置动画。