Question

是否可以将缓动应用于像素模糊函数？

我有一个全屏幕背景图片，我想在点击按钮时模糊，因为我在其上覆盖了更多内容。

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

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

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

我之前在Flash中已经完成了这个效果，但这是我在javascript中的第一次尝试。

如果可以使用pixastic

以外的其他东西，我可以使用不同的js库

由于

Answer 1

有可能吗？肯定。

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

一旦你建立了缓动功能（我不打算为你写，因为有很多缓动函数，我不知道你正在寻找什么类型的效果），只需输入结果模糊值进入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});
}

显然，这不是你想要的，因为步骤之间没有延迟，并且每步增加100％的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＆amp; SHIFT + INSERT准备就绪。

像素模糊缓和？

2 个答案: