9

オブジェクトに対して 2 つのアニメーションを同時に実行する必要があります。
さまざまな理由から、縦方向のアニメーションには jQuery を使用し、横方向のアニメーションには CSS3 を使用したいと考えています。

jQuery 側では、swingイージングがうまく機能します。

jqueryスイング

swing: function (a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}

このイージング機能をCSS3トランジションで表現する方法を探しています。

不可能な場合は、jQuery と CSS3の両方で 使用でき、最も似 て いるイージング関数 (ベジエ曲線など) を探しています。必要なプラグインへのリンクを含めてください。swing

4

3 に答える 3

31

TL;DR

[.02, .01, .47, 1]ベジエ曲線が十分な近似を提供することがわかりました 。

CSS3

-webkit-transition: all 1s cubic-bezier(.02, .01, .47, 1); 
-moz-transition: all 1s cubic-bezier(.02, .01, .47, 1); 
transition: all 1s cubic-bezier(.02, .01, .47, 1);

jQuery

$(element).animate({ height: height }, 1000, $.easie(.02, .01, .47, 1));

jquery.easyを使用します ( bezを使用することもできます)。

クエスト

Sparky672 の回答からこれらのグラフを使用して、正確な関数とその引数を見つけました。

ここに画像の説明を入力

と の間のy = –x • (x – 2)場所と同じです。 だから私はabettercalculatorでグラフを作成しました:x01

ここに画像の説明を入力

切り取ってネットに載せました。
次に、Jim Jeffers によって提案された、cubic-bezier.composition: absoluteをオーバーレイするために使用されました。

ここに画像の説明を入力

私が使用した結果の近似値は[.02, .01, .47, 1].

于 2012-02-12T01:49:09.097 に答える
3

W3Cによると、プロパティでは次のイージング機能のみが許可されtransition-timing-functionます。

  • 簡易
  • 線形
  • イーズイン
  • イーズアウト
  • イーズインアウト
  • キュービックベジェ（<number>, <number>, <number>, <number>）

「swing」を3次ベジェ関数に変換できる場合は、それを実行できます。

また、ここでのグラフィック表現を見ると、ease-out組み込みtransition-timing-functionはの形状に非常に似ているようですswing。

コメントに基づいて編集：

イージングにjQueryを使用したい場合は、プラグインも必要ありません。好みの関数を定義して使用するだけです...

プラグインを使用せずにjQueryイージング関数

于 2012-02-11T23:51:06.783 に答える
1

プリセットまたは単純な 3 次ベジエ曲線に制限されています。トランジションとして実行される CSS キーフレーム アニメーションを生成するイージング エンジンを JavaScript で作成することで、これを回避しました。

bounceDownTransition = new Sauce()
bounceDownTransition.recipe( (element) ->
   element.change("y").from(-200).using(Easie.bounceOut)
   element.change("scale").from(0).using(Easie.circOut)
)

bounceDownTransition.duration(2).delay(0.5).putOn("element_with_this_id")

ここでプロジェクトをチェックアウトできます: https://github.com/jimjeffers/Sauce

CSS キーフレーム アニメーションを使用することで、JavaScript で独自のカスタム イージング方程式を使用することで割り当てられた柔軟性とともに、GPU によって強化された CSS トランジションのパフォーマンスを得ることができます。

私のイージング エンジンは、Robert Penner の方程式のポートを使用します。jswing に一致するものは次のようになります。

@sineIn: (time,begin,change,duration) ->
    -change * Math.cos(time/duration * (Math.PI/2)) + change + begin

https://github.com/jimjeffers/Easie/blob/master/easie.coffee#L218

アップデート：

コメントごとに -- 必要に応じて、次のようなツールを使用してスイング トランジションのカーブを一致させることができます。

http://cubic-bezier.com/#.41,.66,.54,.91

于 2012-02-12T00:06:29.980 に答える