使用StackBlur实现平滑的Javascript动画

Question

http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

如果我移动这个页面上的滑块，模糊效果会非常平滑。

但是如果我试着让动画自动化：

var speed = 1250;
var blur = 100;
var interval = speed/blur;

setInterval(function(){
  blur--;
  stackBlurImage(image, canvas, blur);
}, interval);

这些步骤非常明显，甚至在高速下都不能工作。

有没有人能给出一个替代方案呢？

Answer 1

预渲染不同的模糊级别，将其存储并作为帧循环。无论stackBlurImage做什么，都有可能做得不够快，看起来不像动画。

编辑：我收回这句话，你就是这么做的：http://jsfiddle.net/nwellcome/27QUM/在我看来很棒，你用的是什么浏览器？

编辑2:在此提琴中尝试第二种方法：http://jsfiddle.net/nwellcome/27QUM/4/，而不是每次将模糊半径减少1，而是将fps固定在setInterval可以处理的位置，并操纵每帧减少模糊半径的量。

var fps = 30;
var blur = 100;
var blurTime = 0.5; // seconds
var interval = 1000 / fps; 
var step = blur/ (fps * blurTime);

var anim = setInterval(function(){
    blur-= step;
    if (blur < 0) {
        clearInterval(anim);
    }
    stackBlurImage(image, canvas, blur);
}, interval);

blur编辑3:只是为了好玩，使用HTML5文件API，你可以上传你自己的图像到：http://jsfiddle.net/nwellcome/27QUM/12/