如何根据持续时间在 PaperJS 中对直线或弧的绘制进行动画处理

Question

我有三个问题：

• 我创建了一个动画来绘制一条直线。它有效，但我相信这不是最好的方法。有人可以对我的代码提出一些改进建议吗？

伪代码：

onFrame = function() {
  -Calculate % of the line that have been drawn
  -Find Point between two Points
  -Draw line until this new point
}

这是我在JSFiddle上的代码

• 我的技术适用于直线，但是如果我想根据持续时间绘制弧线，我该怎么办？

• 如果我想向绘图添加缓动效果，该怎么办？

Answer 1

• 我发现创建路径更容易，而不是向路径添加段从两个段中移出，然后每帧移动最后一个段。如果创建一个新Point从你的结束和开始的差异Points，你可以根据你的持续时间。

至于弧线

• ，每帧创建一个新弧线更容易。这 Path.Arc(from, through, to)格式在这里效果很好。只需旋转关于您的中心的起始point的克隆 point percent_completed / 2 * numberOfDegrees和percent_completed * numberOfDegrees以获取每帧的through和to值。如果你想创建一个完整的圆，确保numberOfDegrees略大于 360。否则Arc()可能找不到合适的溶液。

• 基于时间的百分比方法工作正常，但您需要考虑因为当percent_completed在 1 之前结束太远时。

• 如果要执行缓动，请percent_completed通过适当的功能。四处搜索"乙状结肠缓和"。为例：

  percent_completed = Math.pow(percent_completed, .5);

  这可以像您想要的那样复杂。

• 与其每帧检查一个布尔值，不如附加一个onFrame处理程序在设置时，并在完成后删除处理程序。有关更多详细信息，请参阅此问题。

• 如果使用paperscript表示法，则无需将paper前缀添加到构造函数。

• 我也不确定你为什么要在你的paperscript中包含jQuery函数。

这是一个jsFiddle演示。

Answer 2

您可以使用getLocationAt：

for(var i = 0; i < 100; i++) {
    var point = path.getLocationAt(i);
    newPath.add(point);
}

(这只是一个粗略的草图，以解释我的想法(。

Answer 3

这是一个圆跟随弧线的示例，我正在使用我的 folio.js 库的插值函数，但基础知识是。

// move path along an arc
path.position.x *= Math.cos(delta);
path.position.y *= -Math.sin(delta)*2;

查看源代码以查看有关其工作原理的更多详细信息