Pixastic 模糊缓动？答案

【问题标题】：Pixastic blurfast easing?Pixastic 模糊缓动？
【发布时间】：2012-06-19 19:55:24
【问题描述】：

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

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

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

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

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

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

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

谢谢

【问题讨论】：

标签： javascript jquery pixastic

【解决方案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% 的增量是浪费的，但它是对过程的说明。

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

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

【讨论】：

【解决方案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 准备好的。

【讨论】：