像素模糊缓动

Question

是否可以将缓动应用于像素模糊功能？

我有一个全屏背景图像，我想在单击按钮时模糊，因为我在其上叠加了更多内容。

我目前正在这样做（使用 jquery）：

$(".bg").pixastic("blurfast", {amount:1});

这对于模糊效果很好，但它会立即发生。是否有可能通过某种缓和使这种效果淡入？

我以前在Flash中做过这种效果，但这是我第一次尝试javascript。

如果可能的话，我愿意使用不同的 js 库

，而不是像素化

谢谢

Answer 1

可能吗？ 确定。

就像几乎可以在任何数值上进行缓和一样......问题是Pixastic并不直接支持缓动，所以你正在考虑自己构建缓动函数，这很容易。

一旦你构建了缓动函数（我不会尝试为你写，因为有很多缓动函数，我不知道你在寻找什么类型的效果），只需将生成的模糊值输入像素化。

例如，创建一个如下函数：

function myEasingFunc(percent){
    // Your easing code here
    return result;
}

然后使用百分比的递增值重复调用此函数：

for(i==0;i<100;i++){
   var amount=myEasingFunc(i);
   $("#myimage").pixastic("blurfast", {amount:amount});
}

显然，这不是您直接想要的，因为步骤之间没有延迟，并且每个步骤增量为 1% 的 100 个步骤是浪费，但它说明了该过程。

选项还在继续...而不是像你想象的那样根据时间制作模糊的百分比，你也可以根据从视野之外飞入框的文本的位置来制作模糊的百分比，举个例子。

我不知道这是否是你要找的，但我希望它能帮助某人，无论如何。

Answer 2

方法我们使用它是这样的：

var wrap  = $(parent_element);
var img = wrap.find('.img-to-blur');
var canvas = img.clone().addClass('blur').css('opacity', '').prependTo(wrap);
img.fadeOut();
canvas.fadeIn();

这对CPU来说比在javascript中重新计算每个模糊级别要好。

注意：代码更像是一个伪代码，它可能没有准备好 CTRL+INSERT 和 SHIFT+INSERT。