Question

我正在使用canvas中的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。

在javascript中基于时间更新动画（独立于帧）

DT

1 个答案: