1

カードアニメーションのようなリビールアニメーションでメニューを構築しようとしています。

メニュー項目のスタック全体が同じ位置から始まり、スタックが移動すると、最後の項目が目的地に到着するまで、個々のメニュー項目が目的地で停止します。

私はほとんどここで動作しています: http://jsfiddle.net/XVuPQ/2/

for(var j = 0; j < topItems; j++) {
    $col2.append(
        $('<div>')
            .addClass('absColItem')
            .css({
                'top': $(this).position().top + 22,
                'left': '-100px'                    
            })
            .animate({
                'left': 0
            }, 100)
            .animate({
                'top': ($(this).position().top + 22) - (j * (itemHeight + 10))
            }, (j + 1) * 500)
            .data('parent', $(this))

    );
}

しかし、アイテムのタイミングが思い通りに並んでいません。

どうすれば効果を達成できるかについて、誰かアイデアがありますか?

編集 - これまでの回答は役に立ちますが、これは私が達成しようとしているものの粗いアニメーションです。

クルーデッキのアニメーション

4

2 に答える 2

5

答え

jQuery が使用するデフォルトのイージングは​​ と呼ばれswing、これにより項目が不均一な速度でアニメーション化されます。必要な効果を得るにはlinear、jQuery が提供するもう 1 つのオプションであるイージングを使用します。

.animate({ /* animation parameters */ },(j + 1) * 500, 'linear')

.animate({ /* animation parameters */ },(k + 1) * 500, 'linear')

jQueryUI は、さらに選択する必要がある場合、または単にそれらがどのように見えるかを確認したい場合に、さまざまな他のイージング オプションを提供します。

超えて...

アニメーション全体を 1 回のループで実行するようにコードを修正しました。これが役立つかどうかはわかりませんが、非常にきれいで、とても楽しかったです。

結果は次のとおりです。http://jsfiddle.net/corymcd/RsgQd/5/

利点：

  • 以下の元の回答と組み合わせて、アニメーションが割り当てられた時間より長くかかることはありません。
  • アイテムは、上下に関係なく1 つの場所に追加され、アニメーション化されます。
  • アイテムは、最初に追加した順序でアニメーション化/表示されます。

別のオプション

スタックに対するオブジェクトの相対位置に基づいて、アニメーションの速度を調整します。

.animate({ /* animation parameters */ },(j/topItems + 1) * 500)

.animate({ /* animation parameters */ },(k/bottomItems + 1) * 500)

ここにフィドルがあります：http://jsfiddle.net/QY3zD/

最大距離に基づくスケーリングを行わないと (元の方法で)、一方の側にもう一方の側よりも多くのアイテムがある場合、特に上部と下部にアニメーションに時間がかかることに気付くでしょう。

500を 1 つの構成可能な変数に置き換えることで、アニメーションの時間を簡単に調整できます。完全なアニメーションには、指定した時間の 1 ～ 2 倍の時間がかかります。

デュレーションとまったく同じ時間が必要な場合 (例: 500)、 を削除する + 1と、最も外側の要素が最終位置に到達するまでに常にその時間がかかります。これを行う場合、最初の要素が即座にアニメーション化されないように、乗算に加えてベースラインを含めることができます。((k/bottomItems) * 400)+100

于 2013-07-03T17:29:34.717 に答える