Javascript 沿路径的paper.js动画

我正在使用paper.js，并尝试沿我创建的路径设置项目动画

//Path : 
 path = new Path();
 path.add(new Point(0,100), new Point(120,100), new Point(120,150));
//Item
 circle = new Path.Circle(0,100,4);
 circle.strokeColor = "#EEE";

在设置动画时（使用onFrame（）），我希望圆沿着路径移动。。。 有人知道怎么做吗？ 我没有在文档或谷歌上找到它。。。。 我希望这足够清楚

谢谢你的回答

您必须使用：

path.getLocationAt();

方法。此方法接受一个介于0和1之间的参数，其中0表示路径的开始，1表示路径的结束，并返回一个位置

您可以使用：

path.length

属性来计算参数的不同偏移

steps = lengthOfSegmentToWalk / path.length
t = 0;
while( t <= 1  ){
    location = path.getLocationAt( t );
    t += step;
}

---

方法并读取结果路径中的所有点…

尚未对其进行测试，但应该是这样的

// vars
var point1 = [0, 100];
var point2 = [120, 100];
var point3 = [120, 150];

// draw the line
var path = new Path();
path.add(new Point(point1), new Point(point2), new Point(point3));
path.closed = true;

// draw the circle
var circle = new Path.Circle(0,100,4);
circle.strokeColor = "#EEE";

// target to move to
var target = point2;

// how many frame does it take to reach a target
var steps = 200;

// defined vars for onFrame
var dX       = 0;
var dY       = 0;

// position circle on path
circle.position.x = target[0];
circle.position.y = target[1];

function onFrame(event) {

    //check if cricle reached its target
    if (Math.round(circle.position.x) == target[0] && Math.round(circle.position.y) == target[1]) {
        switch(target) {
            case point1:
                target = point2;
                break;
            case point2:
                target = point3;
                break;
            case point3:
                target = point1;
                break;
        }

        // calculate the dX and dY
        dX = (target[0] - circle.position.x)/steps;
        dY = (target[1] - circle.position.y)/steps;

    }

    // do the movement
    circle.position.x += dX;
    circle.position.y += dY;
}

---

更多控制速度的解决方案：

• 动作与时间成正比
• 可以按像素/秒设置速度

var offset=0；
circle.onFrame=函数（事件）{
if（偏移量<路径长度）{
circle.position=path.getPointAt（偏移）；
偏移量+=event.delta*150；//速度-150px/秒
}
否则{
偏移量=0；
}
}

这是一个简单的解决方案，我在Point中添加了一个名为

getPointAtPercent

的方法，所以现在您可以在您的路径上运行该方法，以获得该点的位置

paper.Path.prototype.getPointAtPercent = function (percent) {
    return this.getLocationAt(percent * this.length).getPoint();
};

这里有一个它工作的例子

---

谢谢！我试试这个。但我也用了另一种方法。我正在使用path.getPointAt（）。通过计算动画持续时间的百分比（固定为10秒），我可以获得路径的下一个点，从而沿该点设置项目动画。谢谢有很多方法，这取决于你的脚本，但有一点是肯定的：你总是要处理从0到1的参数，所以如果你想在一个路径链上设置动画，你需要将它们组合起来，以获得它们的总长度。你应该用这个来代替我预定义的vars.path.getLocationAt（t）对我不起作用，我只看了下一节。另一方面，path.getPointAt（）工作得非常完美！它工作得很好（你甚至在接近目标点时添加了一个缓和效果），但我必须纠正一些小问题，比如circle.position.x而不是circle.x或target[0]/target.x。若要删除缓和效果，必须在帧末尾减少步长，然后在开关/机箱中重新初始化。（您甚至可以在步数和当前段长之间设定一个比率，以便在每个段上获得相同的速度…）非常感谢！我明白了为什么会有缓和效果（没有充分考虑到它的低谷），如果在if语句中设置dX和dY，它将不再缓和。我将更新代码。您是否愿意对您的答案添加一个解释，解释为什么它与其他旧帖子不同？此答案比公认的答案更好，因为它依赖于

Path.getPointAt（offset）

，而不是重新发明轮子。

var offset = 0;

circle.onFrame = function (event) {
  if (offset< path.length){
    circle.position =path.getPointAt(offset);
    offset+=event.delta*150; // speed - 150px/second
  }
  else {
    offset=0;
  }
}

paper.Path.prototype.getPointAtPercent = function (percent) {
    return this.getLocationAt(percent * this.length).getPoint();
};