如何根据持续时间在PaperJS中绘制直线或圆弧的图形？

Question

我有三个问题：

• 我创建了一个animation来绘制一条直线。它有效，但我确定这不是最好的方法。有人可以建议我的代码有所改进吗？

伪代码：

onFrame = function() {

  -Calculate % of the line that have been drawn
  -Find Point between two Points
  -Draw line until this new point
}

Here is my code on JSFiddle

• 我的技术是直线工作但如果我想根据持续时间绘制Arc怎么办呢？

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

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 适当的功能。搜索'sigmoid easing'。对于 例如：

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

  这可能与您想要的一样复杂。

• 不是每帧检查一个布尔值，而是附加一个onFrame处理程序 在安装时，并在完成后删除处理程序。有关详细信息，请参阅this question。

• 如果您使用的是paperscript表示法，则无需在构造函数中添加paper前缀。

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

Here's a jsFiddle demonstration.

Answer 2

您可以使用getLocationAt：

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

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

Answer 3

这是一个example of a circle following an arc，我正在使用我的folio.js库的插值函数，但基础知识是。

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

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