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/

使用StackBlur平滑Javascript动画

1 个答案: