16

このjQueryイージング関数を変更して、誇張されていないバウンスを生成するにはどうすればよいですか？

$.easing.easeOutElasticSingleBounce = function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};

これをエミュレートするイージング関数を作成しようとしています。

http://sandbox.scriptiny.com/tinyslider2/

tinyslider2は、次のような同様の関数を使用します。

new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')')

しかし、tinyslider2の方程式をjQueryのイージング形式に適合させるために、今日の数学に頭を悩ませているようには思えません。誰かが私に例を示すことができれば、私はそれをとても感謝します。

アップデート

この方程式は非常に近いです：

$.easing.custom = function (x, t, b, c, d) {
    var s = 1.70158; 
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

最初のバウンスなしで、最後のバウンスだけが必要です。

4

3 に答える 3

14

http://timotheegroleau.com/Flash/experiments/easing_function_generator.htmを使用すると、イージング関数を視覚的に作成できます。右上のF5/FMXラジオボタンを切り替えると、JavaScriptで出力されます。

あなたが望む効果を正確に知らなくても、これはあなたをかなり近づけるはずです。

$.easing.tinyslider = function(x, t, b, c, d) {    
    ts=(t/=d)*t;
    tc=ts*t;
    return b+c*(-8.1525*tc*ts + 28.5075*ts*ts + -35.105*tc + 16*ts + -0.25*t);
}

それ以外の場合は、イージング関数発生器をいじって新しいオプションを試すか、http：//commadot.com/jquery/easing.phpでその他のリソースを検索してください。

jsfiddle

http://jsfiddle.net/XRF6J/

これは答えるのが楽しかったです、私はいつもそれらのイージング機能がどのように機能するかを知りたいと思っていました。

于 2011-03-30T23:29:37.430 に答える
3

jQueryイージングプラグインを試しましたか？

それは多くの新しいイージングを追加します（あなたはそれらをウェブサイトで試すことができます）。

グレースフルデグラデーションを使用できる場合は、 CSSトランジションを確認することをお勧めします。これはハードウェアアクセラレーションであり、事前定義またはカスタム（ベジェ曲線を使用）の遷移を使用できます。

于 2011-03-30T20:15:58.547 に答える
2

これはかなり古いことは知っていますが、まったく同じ効果を出す必要があり、UIで2つのイージング機能を組み合わせて使用​​することに成功しました。

'時間'の95％で遷移の95％の線形アニメーション、次に'時間'の5％で残りの5％の弾性アニメーション16（これは正しく見えるように見えました-多くのアニメーションこの効果の時間は跳ね返るのに費やされているので、かなり長くする必要があります）。

d = [transition 'distance' or whatever];
t = [transition time ms]

da = d * 0.95;
db = d * 0.05;

ta = t * 0.95;
tb = (t * 0.05) * 16;

var anima = {left: "+="+da+"px"};
var animb = {left: "+="+db+"px"};

$(element).animate(anima,ta).animate(animb,tb);

かなりの回避策ですが、ベジェ式を作成できず、髪を引き裂いてみました。

于 2012-01-13T18:29:26.510 に答える