Animation 如何根据持续时间在PaperJS中为直线或圆弧绘制动画？

我有三个问题：

• 我创建了一个用于绘制直线的。这很有效，但我肯定这不是最好的方法。有人可以建议对我的代码进行一些改进吗

伪代码：

onFrame = function() {

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

• 我的技术适用于直线，但如果我想根据持续时间绘制一条直线，我该怎么做

• 如果我想在绘图中添加缓和效果，该怎么办

---

您可以使用

getLocationAt

：

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

for（变量i=0；i<100；i++）{
var point=path.getLocationAt（i）；
添加（点）；
}

---

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

您可以使用

getLocationAt

：

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

for（变量i=0；i<100；i++）{
var point=path.getLocationAt（i）；
添加（点）；
}

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

• 我发现创建路径比向路径中添加线段更容易 从两个段中移出，并每帧移动最后一个段。如果您创建一个 新的

  点

  从你的终点和起点的差异

  点

  ，你 可以根据您的选择轻松计算每帧的位置 持续时间

• 对于圆弧，更容易在每一帧创建一个新的圆弧。这个

  Path.Arc（from，through，to）

  格式在这里工作得很好。只需旋转 克隆您的起点

  点

  关于您的中心

  点

  by

  完成百分比/2*numberOfDegrees

  和

  完成百分比*
  numberOfDegrees

  获取每帧的

  到
  值。如果
  要创建一个完整的圆，请确保
  numberOfDegrees
  为
  略大于360。否则，
  Arc（）
  可能找不到合适的
  解决方案
  

• 您基于时间的百分比方法工作正常，但您需要考虑 当

  完成百分比

  在1之前结束太远时

• 如果要进行放松，请通过 适当的功能。搜索“乙状结肠松弛”。对于 例如：

  percent_completed=Math.pow（percent_completed.5）
  
  这可能是复杂的，因为你想使它
  

• 不是每帧检查一个布尔值，而是附加一个

  onFrame

  处理程序 安装时，并在完成后移除处理程序。有关更多详细信息，请参阅

• 如果使用的是

  paperscript

  表示法，则无需向构造函数添加

  paperscript

  前缀

• 我也不知道为什么要在paperscript中包含jQuery函数

• 我发现创建路径比向路径中添加线段更容易 从两个段中移出，并每帧移动最后一个段。如果您创建一个 新的

  点

  从你的终点和起点的差异

  点

  ，你 可以根据您的选择轻松计算每帧的位置 持续时间

• 对于圆弧，更容易在每一帧创建一个新的圆弧。这个

  Path.Arc（from，through，to）

  格式在这里工作得很好。只需旋转 克隆您的起点

  点

  关于您的中心

  点

  by

  完成百分比/2*numberOfDegrees

  和

  完成百分比*
  numberOfDegrees

  获取每帧的

  到
  值。如果
  要创建一个完整的圆，请确保
  numberOfDegrees
  为
  略大于360。否则，
  Arc（）
  可能找不到合适的
  解决方案
  

• 您基于时间的百分比方法工作正常，但您需要考虑 当

  完成百分比

  在1之前结束太远时

• 如果要进行放松，请通过 适当的功能。搜索“乙状结肠松弛”。对于 例如：

  percent_completed=Math.pow（percent_completed.5）
  
  这可能是复杂的，因为你想使它
  

• 不是每帧检查一个布尔值，而是附加一个

  onFrame

  处理程序 安装时，并在完成后移除处理程序。有关更多详细信息，请参阅

• 如果使用的是

  paperscript

  表示法，则无需向构造函数添加

  paperscript

  前缀

• 我也不知道为什么要在paperscript中包含jQuery函数

这里有一个例子，我正在使用我的库的插值函数，但基本的是

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

查看以查看有关其工作原理的更多详细信息，这里有一个示例，我正在使用库中的插值函数，但基础是

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

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