1

是否可以将缓动应用于 pixastic blurfast 函数？

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

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

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

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

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

如果可能在 pixastic 以外的其他东西中使用，我愿意使用不同的 js 库

谢谢

4

2 回答 2

1

可能吗？当然。

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

一旦你构建了缓动函数（我不会尝试为你编写，因为有许多缓动函数，而且我不知道你在寻找什么类型的效果），只需将生成的模糊值输入 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 个 1% 增量的步骤是浪费的，但它说明了该过程。

选项不断地进行......而不是根据时间来确定模糊百分比，就像您在想的那样，您也可以根据从视野之外飞入框的文本的位置来设置它，就像一个例子一样。

我不知道这是否是您正在寻找的东西，但我希望它对某人有所帮助，无论如何。

于 2012-12-13T15:42:52.337 回答
0

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

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 准备好的。

于 2014-07-25T15:32:17.087 回答