javascript - 在javascript中根据时间更新动画（独立于帧）

Question

我正在使用画布中的 javascript 实现一个简单的动画。图像根据dt每帧之间经过的时间更新其位置。这是代码

var lastTime=0;
var speed=100;

mySprite = function() {
  this.pos=[0,0];
}

function spritePosition(dt) {
  for (i=0; i < Stuff.sprite.length;i++) {
    Stuff.sprite[i].pos[0] += speed*dt;  
    }
}

function animate(){

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

  var now = Date.now();
  var dt = (now - lastTime) / 1000.0;

  //clear
  context.clearRect(0, 0, canvas.width, canvas.height);


  //update
  spritePosition(dt);
  updateSprite();

  //render
  background(canvas,context);
  draw(context);

  lastTime = now;

  //request new Frame
  requestAnimFrame(function() {
    animate();
  });
}

window.onload=function(){
  init();
  animate();
}

dt

值在 0.3-0.5 范围内，但线

Stuff.sprite[i].pos[0] += speed*dt;##

将位置值分配为 136849325664.90016。请帮忙。

Answer 1

您初始化lastTime为0- 所以初始增量非常长（截至今天将近 45 年！）。您应该确保捕获第一次运行（与 0 相比？或lastTime用初始化Date.now()）并单独处理它，可能设置dt为0.