私のRectの「アニメーション」をより滑らかにしたいと思っています。現在、それは本当にclunkyです。私はその理由を知っています。座標の1つは、他の座標の前に必要な値になります。移動するRectをより滑らかにする
たとえば、私が現在(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>
:
は修正スニペットを見たことがありますか?今のところそれは本当に明確ではない –
私は表現を使って絵を追加します、ちょっと分かります。 – Paran0a