移動するRectをより滑らかにする

Question

私のRectの「アニメーション」をより滑らかにしたいと思っています。現在、それは本当にclunkyです。私はその理由を知っています。座標の1つは、他の座標の前に必要な値になります。

たとえば、私が現在（0,0）にいて、（150,75）に行く必要があり、毎秒毎に均等にインクリメントすると、yコードはxコードよりずっと早くなります。常に比例しない代わりに、あなたはDIR設定したためだ

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

[+ -1、+ -1] [DX、DY]（実際の変位）、。あなたが達成したいですアニメーションの種類を

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>