2

私は一種のアニメーション スライドショーを表示するアプリに取り組んでいます。複数のモニターが、同じコンピューターによって制御された、異なるが関連するアニメーションを表示します。

アニメーションは、異なるモニター間で同期する必要があります。つまり、モニター A では要素が動き始め、モニター B ではまったく別の要素が動き始めますが、これらは明らかに同時に発生する必要があります。

私は、モニターごとに異なるブラウザー ウィンドウを使用することを前提としています。

タイムアウトを使用して、アニメーションを同時に起動するのは簡単でした。現在の Time をスケジュールされた時間と比較し、そのミリ秒数だけ待機します。メソッドの上部にある console.log() は、両方のメソッドが互いに 1 ～ 2 ミリ秒以内に起動することを示しています。ただし、アニメーションは同時に発生しません。よく見ると、1/3 秒も遅れています。どれが最初でどれが最後かは一貫していません。(参考までに、これらは CSS3 アニメーションです。)

では、setTimeout がそれを行わない場合、他にどのようなオプションがありますか?

SVG/SMIL に移行する必要がありますか? 実行しているブラウザを選択できます。

または、ブラウザー ウィンドウをすべてのモニターにまたがらせる簡単な解決策はありますか?

4

1 に答える 1

1

ブラウザ ウィンドウがすべてのモニタにまたがるようにすることは間違いありません。そうすれば、すべてのアニメーションが同じスレッドで動作し、すべてのタイミングを適切に調整できます。2 つの異なるブラウザー ウィンドウがあると、タイミングが悪夢になります。ウィンドウが非常に広いためにCSSが少しトリッキーである場合でも、長期的に見ればより良い結果が得られます。

実行する CSS3 アニメーションの種類によっては、CSS3 アニメーションをかなり簡単に処理するjQuery Transitなどのフレームワークを使用できます。次に例を示します。

//Fire off 1st and 4th object simultaneously
$("#object1, #object4").transition({ "y": 300 }, 5000, "in",function () {

    //Fire off 2nd/3rd object once 1st/4th have finished their thing
    $("#object2, #object3").transition({ "y": 500, "background-color": "red" });
});

JS フィドルのデモ

于 2013-05-16T19:52:05.990 に答える