Question

我一直在尝试使用我在HTML网站上制作的spritesheet进行逐帧动画，但我无法弄清楚如何锁定动画的fps。问题是它总是以闪电般的速度运行，我希望能够以~10-15 fps锁定它我尝试过使用Date.now（）方法和setInterval方法，但它似乎暂时无法正常工作。

我使用这个动画的方式也依赖于检查数组以确保它应该承诺动画我制作的4帧动画。这是我一直在使用的代码。

function animateCharacter() {
    var canvas = document.getElementById("portrait");
    var context = canvas.getContext("2d");
    var character = new Image();
    character.src = "/assets/spritesheet.jpg";
    animate();
    function animate() {

        context.drawImage(character, shift, 0, width, height, 300, 0, width / 2, height / 2);

        if (currentFrame == totalFrames) {
            shift = 0;
            currentFrame = 0;
        }
        requestAnimationFrame(animate);

}

Answer 1

您可以尝试setTimeout

$anmt_t = (new \yii\db\Query())
    ->select(['*'])
    ->from('anmt')
    ->where(['status' => 'confirmed'])
    ->andWhere(['between', 'price', $min_price, $max_price, when (currency = 'sum')])
    ->andWhere(['between', 'price', $min_price*2, $max_price*2, when (currency = 'y.e.')])
    ->all();

Answer 2

有多种方法可以解决这个问题，但一般的想法是检查您在rAF回调中获得的HighResTimeStamp，并根据它更新您的值。

这是一个虚拟实现，只有在至少一个帧已经通过时才会更新，并且会将 time_delta 传递给update函数，因此它知道它应该缩放多少它的速度值。

const ctx = c.getContext('2d');

// we need to know when the last frame did trigger
let lastTick = performance.now();
function anim(time){
  const time_spent = time - lastTick,
    passed_frames = time_spent / (1000 / FPS.value);
  if(passed_frames >= 1){
    update(passed_frames);
    lastTick = time;
    draw();
  }
  requestAnimationFrame(anim);
}

let x = 0;
const speed = 5;
function update(time_delta){
  x = (x + (speed * time_delta)) % (c.width - 10);
}
function draw(){
  ctx.clearRect(0,0,c.width,c.height);
  ctx.fillRect(x, 50, 20, 20);
}

anim(performance.now());

<label>FPS: 1<input id="FPS" type="range" min="1" max="120">120</label><br>
<canvas id="c"></canvas>

请注意，这只是可以完成的众多实现中的一个，我们也可以将此 time_delta 值四舍五入，和/或甚至在for循环中运行update，或者...

用于HTML Canvas / Javascript的FPS锁

2 个答案: