如何根据持续时间在 PaperJS 中绘制线条或弧线的动画？答案

【问题标题】：How to animate the drawing of a line or an arc in PaperJS based on a duration?如何根据持续时间在 PaperJS 中绘制线条或弧线的动画？
【发布时间】：2013-11-26 05:11:39
【问题描述】：

我有三个问题：

我创建了一个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，我该怎么做？
如果我想给绘图添加缓动效果怎么办？

【问题讨论】：

标签： animation paperjs

【解决方案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 前缀。
我也不确定你为什么要在 paperscript 中包含 jQuery 函数。

Here's a jsFiddle demonstration.

【讨论】：

【解决方案2】：

你可以使用getLocationAt:

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

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

【讨论】：

【解决方案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 以了解有关其工作原理的更多详细信息

【讨论】：