Question

我有一个画布动画，我希望减速，这是一个非常简单的噪音效果，围绕像素移动。演示可以在这里找到：https://codepen.io/anon/pen/eyyjqm - 我想减慢像素移动/抖动。

const canvas = document.querySelector('canvas'),
                 ctx = canvas.getContext('2d')

canvas.width = canvas.height = 128

resize();
window.onresize = resize;

function resize() {
    canvas.width = window.innerWidth * window.devicePixelRatio / 1
    canvas.height = window.innerHeight * window.devicePixelRatio / 1
    canvas.style.width = window.innerWidth + 'px'
    canvas.style.height = window.innerHeight + 'px'
}

function noise(ctx) {

    const w = ctx.canvas.width,
                h = ctx.canvas.height,
                iData = ctx.createImageData(w, h),
                buffer32 = new Uint32Array(iData.data.buffer),
                len = buffer32.length
      let i = 1

    for(; i < len;i++)

        if (Math.random() < 0.5) buffer32[i] = 0xffffffff;

        ctx.putImageData(iData, 0, 0);
}

(function loop() {
    noise(ctx);
    requestAnimationFrame(loop);
})();

我已经尝试过;

window.setInterval（＆＃39;噪声（CTX）＆＃39;，10）;

但这看起来很紧张而且不是很平滑因为我设置了10帧的间隔。什么是减慢动画的更好方法？

欣赏任何想法！谢谢，约翰

Answer 1

这可能对您有所帮助。

A1:A100传递正在执行的currentTime作为参数，因此您可以在每次调用中获得一些delta requestAnimationFrame时间，如果非常短则不再执行噪声函数，另一方面如果它已经过了相当长的时间再次执行它，这个deltaTime可以设置：

类似的东西：

currentTime - oldTime

这里有效：https://codepen.io/anon/pen/GyyYKa

Answer 2

我重写了一些代码，使它更有效率，并希望得到你想要的类似效果：

const w = ctx.canvas.width;
      h = ctx.canvas.height;
const   iData = ctx.createImageData(w, h);
        buffer32 = new Uint32Array(iData.data.buffer);
      len = buffer32.length;

window.setInterval('noise(ctx)',38);
function noise(ctx) {
  let i = 1

for(; i < len;i += 4)

  if (Math.random() < 0.4)
  {
    buffer32[i] = 0xffffffff;
  } else {
    buffer32[i] = 0x00000000;
  }

  ctx.putImageData(iData, 0, 0);
}

//(function loop() {
  //noise(ctx);
//    requestAnimationFrame(loop);
//})();

然而，我会建议应用更传统的噪声算法，例如单纯形算法。请参阅此处的示例：http://haptic-data.com/toxiclibsjs/examples/simplex-noise-canvas。它很可能会更顺畅。

Answer 3

我过去曾使用这种方法来限制动画的更新频率。

let frame = 0
let frameLimit = 3

draw() {
  // animation code here...
}
 
animate() {
  frame++
  if (frame % frameLimit === 0) {
    // make some changes then redraw animation
    draw()
  }
  requestAnimationFrame(animate)
}

现在您的动画只会每三帧更新一次。然后，您可以轻松调整该值以加快或减慢动画速度。我不想声称这是最好的方法，但它是我没有看到列出的替代方法。

减慢javascript画布动画的最佳方法是什么？

3 个答案: