Riattiva Rect più liscio

Question

Voglio rendere più "fluida" l'animazione del mio Rect. Attualmente è davvero goffo. Conosco la ragione per questo. Una delle coordinate diventa valore ricercato prima dell'altro.

Ad esempio se sono attualmente a (0,0) e devo andare a (150,75) e incrementare ogni uno ugualmente ogni secondo, il cavo y verrà molto prima di x-cord.

var canvas = document.getElementById('canvas'); 
 
var ctx = document.getElementById('canvas').getContext('2d'); 
 

 
var aniTimer; 
 

 
var x; 
 
var y; 
 

 
var tx = tx || 0; 
 
var ty = ty || 0; 
 

 
var xDir; 
 
var yDir; 
 

 
function followMouse(e) { 
 
    x = e.offsetX; 
 
    y = e.offsetY; 
 
    cancelAnimationFrame(aniTimer); 
 
    moveObject(); 
 
} 
 

 
function moveObject() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    
 
    if (x < tx) { 
 
    xDir = -1; 
 
    } else { 
 
    xDir = 1; 
 
    } 
 
    if (y < ty) { 
 
    yDir = -1; 
 
    } else { 
 
    yDir = 1; 
 
    } 
 
    tx = tx != x ? tx + xDir : tx; 
 
    ty = ty != y ? ty + yDir : ty; 
 
    
 
    
 
    ctx.fillRect(tx - 25 , ty + 25, 50, 10); 
 
    if (tx != x || ty != y) { 
 
    aniTimer = window.requestAnimationFrame(moveObject); 
 
    } 
 
} 
 

 
function resizeCanvas() { 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 
}; 
 

 
canvas.addEventListener('mousemove', _.throttle(function(e) { 
 
    followMouse(e); 
 
}, 100)); 
 

 
window.addEventListener('resize', resizeCanvas, false); 
 

 
resizeCanvas();

html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
canvas { 
 
    display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<canvas id="canvas"></canvas>

Answer 1

Questo perché si imposta dir [+ -1, -1 +] invece [dx, dy] (lo spostamento reale), che non sono sempre proporzionale.

Dai un'occhiata alla frammento modificato:

var canvas = document.getElementById('canvas'); 
 
var ctx = document.getElementById('canvas').getContext('2d'); 
 

 
var x; 
 
var y; 
 

 
var tx = tx || 0; 
 
var ty = ty || 0; 
 

 
var xDir; 
 
var yDir; 
 

 
function followMouse(e) { 
 
    x = e.pageX; 
 
    y = e.pageY; 
 
    moveObject(); 
 
} 
 

 
function moveObject() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    var scale = 0.2 * Math.max(canvas.width, canvas.height); 
 
    xDir = (x - tx)/scale; 
 
    yDir = (y - ty)/scale; 
 
    tx = tx != x ? tx + xDir : tx; 
 
    ty = ty != y ? ty + yDir : ty; 
 

 

 
    ctx.fillRect(tx - 25, ty + 25, 50, 10); 
 
    if (tx != x || ty != y) { 
 
    window.requestAnimationFrame(moveObject); 
 
    } 
 
} 
 

 
function resizeCanvas() { 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 
}; 
 

 
canvas.addEventListener('mousemove', _.throttle(function(e) { 
 
    followMouse(e); 
 
}, 100)); 
 

 
window.addEventListener('resize', resizeCanvas, false); 
 

 
resizeCanvas();

html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
canvas { 
 
    display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<canvas id="canvas" style="border: 1px solid black"></canvas>