使用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/在Chrome中看起来很棒,你使用的浏览器是什么？

编辑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);

编辑3:只是为了它的乐趣,使用HTML5文件API,你可以上传自己的图像模糊:http://jsfiddle.net/nwellcome/27QUM/12/