2d animation on html5 canvas using a vector and speed

Question

Im moving a starship from one location to the other. In creating a vector, normalize and magnitude it.

Lets assume my vector looks like this

Vector
    x: 156,
    y: -90,
    m:  180.0000000546,
    nx:  0.8661855860486004,
    ny: -0.49972245348957717,

The way im animating the ships movement currently is:

            if (! action.animated){
                if (action.type == "move"){
                    if (game.ships[i].actions[j].v.m > 0){ 
// v is the Vector above !
                       game.ships[i].x += action.v.nx;
                       game.ships[i].y += action.v.ny;
                       game.ships[i].actions[j].v.m--;
                    }
                    else {
                       game.ships[i].actions[j].animated = true;
                    }

So basicly, im using requestanimationframe and a loop to move the starship by what equals 1 magnitude / 1 unit length (px) per frame. So far it is working (but for the fact that the vessel animates one more magnitude than it should).

However, assuming i have two starships and one has a vector magnitude of 180 while the other has a magnitude of 200 and im animating both at the same time, how can i create an animation that will move the faster starships quicker, i.e. both starships should begin moving and end moving in the same frame ?

Answer 1

Please don't use the magnitude. Because all it does is complicate things. Use a constant number (aka frameRate) that will determine the speed of change in frames. You can also check out this answer: Sprite Animation Best Practices

The above method will allow you to have the same animation that can be used by multiple sprites. Instead of each sprite having it's own animations. Hope this helps :D