javascript - 浏览器中的动画透明图像噪声 - Limbo 效果

Question

我正在尝试制作动画图像噪声，类似于游戏 Limbo 或 Left4Dead。

噪音必须具有一定程度的透明度，这将 .gifs 排除在选项之外。

我可以用 .png 精灵表制作一个 div，并通过它制作动画，然后在整个网站上重复这个小 div，但这听起来很昂贵。

.apng 将是最佳选择，但确实不支持。

我能想到的唯一其他选择是使用 javascript 生成噪音客户端，但这听起来可能会导致浏览器 fps 大幅下降。

任何想法stackoverflow？

Answer 1

一提到Limbo，就勾起了一些美好的回忆。在我感到无聊之前几分钟内把它扔在一起。不完全确定你从你的问题中得到了什么，但也许它可能在你对如何处理这个问题的想法集中起来时会有一些用处，如果我试图在 jquery 中处理它，这可能是我会走的那种路线。

http://jsfiddle.net/eT7kH/1/

$(document).ready(function(){

  var shades = new Array('#000000','#030303','#050505','#080808','#111111','#141414','#181818','#222222');

  function alter_noise() {
    $('.noise').css('background-color', shades[Math.floor(Math.random()*shades.length)]); // varying colour
    $('.noise').css('opacity', '0.2' + (1 + Math.floor(Math.random() * 3))); // varying opacity

    setTimeout(alter_noise, 50 + Math.floor(Math.random() * 100)); // varying update time
  }

  alter_noise();
});