Which linear "movement strategy" is better in a canvas? - animation

Question

I've seen 2 moving strategies:
Using time:
point = function(x) {
this.x = x;
this.moveTo = function(x, originalX, speed, startTime) {
var direction = x > originalX ? 1 : (x < originalX ? -1 : 0);
if(direction == 0) return;
// speed is px/seconds, so divide time by 1k
var dt = (new Date().getTime() - startTime) / 1000;
var speedX = speed * direction;
var newX = originalX + speedX * dt;
if (direction == 1 && newX => x || direction == -1 && newX <= x) {
// we went past, stay put and finish this
this.x = x;
return;
}
requestAnimationFrame(function(){
this.moveTo(x, originalX, speed, startTime);
});
}
}
Or using percentages per frame?
point = function(x) {
this.x = x;
this.moveTo = function(x, originalX, percentagePerFrame, p) {
if (p >= 1) return;
var dx = (x - originalX) * p;
this.x = x + dx;
requestAnimationFrame(function(){
this.moveTo(x, originalX, percentagePerFrame, p + percentagePerFrame);
});
}
}
Is it irrelevant? I can tell that using time&speed is slower, but... does it matter? is there a better way?

Answer 1

Just some thoughts:
requestAnimationFrame ("RAF") will skip frames if the system is busy.
So if you need the animation to adjust for the skipped frames, then use elapsed time as in your first example.
If you just want an object to move with every frame and the "jitter" caused by missed frames don't impact your design, then your second example is just fine.
Note that RAF in modern browsers will feed you the elapsed time so you don't need the manual variables and calculations that you've done in the first example.