paper.js 沿路径的动画答案

【问题标题】：paper.js animation along a pathpaper.js 沿路径的动画
【发布时间】：2012-09-06 07:33:34
【问题描述】：

我正在使用 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()），我希望圆圈跟随路径... 有谁知道这是怎么做到的吗？我没有在文档或谷歌上找到它...... 我希望它足够清楚..

感谢您的回答！

【问题讨论】：

标签： javascript animation canvas

【解决方案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

【讨论】：

效果很好（你甚至可以在靠近目标点时添加缓动效果）但我必须纠正一些小问题，比如 circle.position.x 而不是 circle.x 或 target[0 ] / 目标.x。要删除缓动效果，您必须在帧结束时减少步骤并在开关/案例中重新初始化它。（您甚至可以在步数和当前段长度之间进行比率，以便在每个段上获得相同的速度......）非常感谢！
我明白为什么会有缓动效果（没有完全认为它是低谷的），如果你在 if 语句中设置 dX 和 dY，它应该不再缓和了。我会更新代码。

【解决方案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;
  }
}

【讨论】：

您是否愿意为您的答案添加解释，说明为什么它与其他旧帖子不同？
这个答案比公认的答案更好，因为它依赖于Path.getPointAt(offset)，而不是重新发明轮子。

【解决方案3】：

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

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

这是它工作的一个例子

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

【讨论】：

【解决方案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 );

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

【讨论】：

谢谢！我会试试这个。但我已经做了另一种方法也有效。我正在使用 path.getPointAt()。通过计算我的动画持续时间的百分比（固定为 10 秒），我可以获得路径的下一个点，从而沿它为项目设置动画。谢谢！
有很多方法，取决于你的脚本，但事情是肯定的：你总是必须处理从 0 到 1 的参数，所以如果你想在一系列路径上制作动画，你需要将它们组合起来得到它们的总长度。
你应该使用这个而不是我的预定义变量。
path.getLocationAt( t ) 对我不起作用，它只带我进入下一个部分。另一方面，path.getPointAt() 工作完美！