Question

我正在使用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（））我希望圆圈遵循路径... 有谁知道这是怎么做到的吗？我没有在doc或google上找到它.... 我希望它足够清楚......

感谢您的回答！

Answer 1

尚未测试，但它应该是这样的。

// 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;
}

Working DEMO

Answer 2

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

此举与时间成正比
可以按像素/秒设置速度

http://jsbin.com/cukine/28/edit?html,output

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;
  }
}

Answer 3

这是简单的解决方案，我在Point中添加了一个名为getPointAtPercent的方法，所以现在你可以在你的路径上运行它以获得该点的位置。

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

这是一个工作的例子

http://jsfiddle.net/icodeforlove/uqhr8txp/1/

Answer 4

你必须使用：

path.getLocationAt();

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

您可以使用：

path.length

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

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

祝你好运

编辑::

或者您可以使用

path.flatten( maxDistance );

方法并从结果路径中读取所有点...

paper.js沿路径的动画

4 个答案: