メトロ jsプラグインを使用して 2 つのアニメーションを結合しようとしています。マルチストップアニメーションとフリップアニメーションを組み合わせたい。フリップ アニメーションは少し遅れて発生するはずです。サンプルコードを使って始めるのを手伝ってもらえますか?
助けてくれてありがとう。
2092 次
1 に答える
0
それは、探しているハックの量によって異なります。
これを行うための簡潔で汚い方法がありますが、それがクロス ブラウザーで機能することは保証できません。また、同期の問題が気になる場合は、慎重に調整する必要があります。
説明すると、1 つのタイルを別のタイルのフレーム内に埋め込むことはできますが、内部のタイルは表示されているかどうかについて「スマート」ではありません。再表示されるたびにアニメーションがリセットされるわけではありません。
フリップ タイルを外側のアニメーションとして開始し、複数のストップ タイルをフリップの最初の面として埋め込むと、複数のストップを表示してタイルを反転させることができます。
ここで注意が必要なのは、値がアニメーション間delayの遅延であり、アニメーションの実行時間を考慮していないということです。フリップする前に複数のストップ タイルのすべてのストップを表示するには、フリップ タイルの遅延を次のようにする必要があります。number-of-stops * ( multiple-stops-tile-delay + multiple-stops-tile-single-animation-time ) - flip-tile-single-animation-time
これは jsfiddle の例です(与えられた 2 つの例を単に変更しただけです)。フリップ タイルの遅延が十分に長く設定されていません。代わりに、単純にストップ数 * 遅延時間を使用しました。複数のストップ タイルを 3 つのストップで 6000 の遅延に設定し、親フリップ タイルを 18000 の遅延に設定しました。これを 2 回以上実行すると、まったく同期しなくなります。
注: Chrome、Firefox、および IE 9 でこれをテストしたところ、基本的に 3 つすべてで動作しますが、IE では他の 2 つとは奇妙な遅延タイミングが発生する可能性があり、3 つのブラウザーすべてでフリップ同期が停止する可能性があります。
より長くより洗練された方法には、他のタイル内のタイルのアニメーションを強制的にリセットするプラグインへのコード変更、または同様のアプローチが含まれますが、単にそれを指摘する以上のことは、簡単な答えの範囲外になります.
于 2013-01-07T18:45:26.023 に答える