Pixastic blurfast easing？

Question

是否可以將緩動應用於像素模糊函數？

我有一個全屏幕背景圖像，我想單擊按鈕時模糊，因爲我覆蓋了一些更多的內容。

我目前做這（使用jQuery）：

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

其中用於模糊工作正常，但它即刻發生。是否有可能通過某種寬鬆措施使這種效應消失？

我已經在Flash中完成了這個效果，但這是我第一次嘗試使用javascript。

我打開使用不同的JS庫，如果它比其他pixastic

感謝

Answer 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}); 
} 

顯然，這不會是你會直接想要的東西，因爲在這些步驟之間沒有延遲，並且具有百分之一增量的步驟每個都是浪費的，但它是對該過程的說明。

選項不斷變化...而是根據時間使模糊的百分比基於時間，就像您在想的那樣，您還可以基於從視圖外飛入框中的文本的位置，作爲一個例子。

我不知道這是你在找什麼，但我希望它可以幫助別人，不管。我們使用像這樣的東西

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就緒。