使移动矩形更平滑 [英] Make moving Rect more smooth

问题描述

我想让我的Rect的动画更流畅。目前它真的很笨重。我知道它的原因。

例如，如果我目前在（0,0），我需要去（150,75）

  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  

  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>  

解决方案>

这是因为你设置dir [+ -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 scaling = 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>  

I want to make "animation" of my Rect more smooth. Currently it's really clunky. I know the reason for it. One of the coordinates becomes wanted value before the other.

For example if I'm currently at (0,0) and I need to go to (150,75) and I increment each one equally every second , y-cord will come much sooner than 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>

解决方案

That's because you set dir [+-1, +-1] instead [dx, dy] (the actual displacement), which are not always proportional.

Have a look at the modified snippet:

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>

这篇关于使移动矩形更平滑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！