Vehicle animation using x,y co ordinates and orientation

Questions
14

You had a couple of errors which I have corrected

coordinates.push({'x' : 1000+i, 'y' : 200+i});

These values put the box outside the range of the camera.

frame: i * frameRate,

Let us look further at frames and frameRate and different ways to use them.

Suppose we want the animation to last 50 seconds at a frameRate of 6 frames per second, then we need a total of 50 * 6 = 300 frames

Say our key frames are at 0, 25 and 50 seconds are at frame numbers 0, 150, and 300

frame 0 is at 0 seconds, frame 150 is at 25 seconds and frame 300 is at 50 seconds

In general we can then set frame number to be fraction of time * total time * frameRate

so

keyFrames.push({
        frame: 0 * totalTime * frameRate,
        value: atstart
    });

    keyFrames.push({
        frame: 0.5  * totalTime * frameRate ,
        value: halfWay
    });

    keyFrames.push({
        frame: 1 *  totalTime * frameRate,
        value: atEnd
    });

Taking this approach of building the frameRate into the frame number when you change the frameRate the time of the animation does not change.

There is yet another approach, more in line with your example.

We have 80 values to hit

for (i = 0;  i < 80;  i++) {
    keyFrames.push({
        frame: i,
        value: valueAt[i]
    });
}

Now I want the animation to last 15 seconds, as there are 80 frames I need a frameRate of 15 / 80 frames per second,

Decreasing the frame rate will increase the time of the animation as it will play slower.

Line 30 - The last frame number is fixed so only needs to be there once and outside the loop and is the length of your x, y array less one.