javascript - 如何在 paper.js 中沿贝塞尔曲线路径为对象设置动画？

Question

我正在尝试使用 paper.js 构建一个小型老虎机赛车游戏，但我无法沿着我创建的轨道移动汽车对象。

我搜索了其他线程，但没有找到贝塞尔曲线轨道的解释。我已经画好了赛道和汽车。汽车位于轨道上，但它没有移动，尽管我实现了一个 onFrame 函数，它应该改变它的位置。

我猜测底部的 onFrame 函数中的 racingtrack.getPointAt(i*length) 有问题，但我不知道是什么。代码对我来说很有意义，上面的 racingtrack.getPointAt(offset) 正在运行。

有人可以帮帮我吗？非常感谢!

这是我的代码:

//DRAW A RACING TRACK
var racingtrack = new Path();

racingtrack.strokeColor='#DA0734';
racingtrack.strokeWidth=4;

var handleInTop = new Point(-90, 0);
var handleOutTop = new Point(90, 0);
var handleInSide = new Point(0, -90);
var handleOutSide = new Point(0, 90);

Segment1 = new Segment(new Point(230, 100), handleOutTop, handleInTop);
Segment2 = new Segment(new Point(100, 275), handleInSide, handleOutSide);
Segment3 = new Segment(new Point(230, 450), handleInTop, handleOutTop);
Segment4 = new Segment(new Point(435, 450), handleInTop, handleOutTop);
Segment5 = new Segment(new Point(765, 100), handleInTop, handleOutTop);
Segment6 = new Segment(new Point(970, 100), handleInTop, handleOutTop);
Segment7 = new Segment(new Point(1100, 275), handleInSide, handleOutSide);
Segment8 = new Segment(new Point(970, 450), handleOutTop, handleInTop);
Segment9 = new Segment(new Point(765, 450), handleOutTop, handleInTop);
Segment10 = new Segment(new Point(435, 100), handleOutTop, handleInTop);

racingtrack.add(Segment1, Segment2, Segment3, Segment4, Segment5, Segment6, Segment7, Segment8, Segment9, Segment10);
racingtrack.closed=true;

racingtrack.fullySelected=false;
racingtrack.position = view.center;

//DRAW A RACING CAR
var racingcar = new Path();

racingcar.fillColor = '#DA0734';

var handleInRightCar = new Point(0, 13)
var handleOutRightCar = new Point(0, -13)

FirstCorner = new Point(100, 470);
SecondCorner = new Point(100, 496);
ThirdCorner = new Point(140, 496);
FourthCorner = new Segment(new Point(145, 483), handleInRightCar, handleOutRightCar);
FifthCorner = new Point(140, 470);

racingcar.add(FirstCorner, SecondCorner, ThirdCorner, FourthCorner, FifthCorner);
racingcar.closed = true;


//PUT RACINGCAR ON STARTING POINT
var offset = 0;
var startposition = racingtrack.getPointAt(offset);

racingcar.position = startposition;


//MOVE CAR ALONGSIDE RACINGTRACK
//set the number of parts the track is divided into
var amount = 100;
//calculate the length of one part
var length = racingtrack.length / amount;

//animate the car, moving from position to position alongside the racingtrack
var carposition = new Point();

function onFrame(event){
    for(var i=0; i < amount+1; i++){
        carposition = racingtrack.getPointAt(i * length);
        racingcar.position = carposition;
    }
}

Answer 1

请记住，onFrame 尝试每秒执行 60 次。

这意味着您正在移动 100 个汽车位置 X 60fps == 每秒 6000 次绘制 == 绘制太多

此代码将让您的汽车大约每 1.5 秒绕赛道一圈。

var currentPosition=0;

function onFrame(event){

    carposition = racingtrack.getPointAt(currentPosition * length);

    racingcar.position = carposition;

    if(++currentPosition>100){currentPosition=0;}

}