1

pixastic ブラーファスト関数にイージングを適用することは可能ですか?

ボタンをクリックすると、その上にさらにコンテンツを重ねてぼかしたいフルスクリーンの背景画像があります。

私は現在これを行っています（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});
}

ステップ間に遅延がなく、それぞれが 1% ずつ増加する 100 のステップを持つのは無駄ですが、これはプロセスの例証です。

オプションは延々と続く...あなたが考えているように、時間に基づいてぼかしの割合を作成するのではなく、一例として、ビューの向こうからボックスに飛び込むテキストの位置に基づいてぼかしを設定することもできます。

これがあなたが探しているものかどうかはわかりませんが、関係なく誰かに役立つことを願っています.

于 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();

javascript で各ぼかしレベルを再計算するよりも、CPU にとってはうれしいことです。

注意: コードは疑似コードに近いものであり、CTRL+INSERT および SHIFT+INSERT の準備が整っていない可能性があります。

于 2014-07-25T15:32:17.087 に答える