0

私は 2 つの setTimeout 関数を持っています。これらは完全に同期する必要があり、 setTimeout はそれをカットしません: div は、y 位置がウィンドウの高さよりも大きくなるとすぐに x 位置をリセットしてから、0 にリセットして新たに開始する必要があります。そんな感じ。どうにかして getMilliseconds を統合することを考えていますが、他の方法でも構いません。
現在のJavascriptは次のとおりです。

var width = window.outerWidth;
var height = window.outerHeight;
var h2 = height * 5;
//left
function LR() {
    setTimeout(function() {
        var left = [];
        var one = 1;
        do {
            one++;
            left.push(one);
        }
        while (one <= width);
        var random = Math.floor(Math.random() * left.length);
        document.getElementById("test").style.left = random + "px";
        LR();
    }, h2);
}
LR();
//top
function TB() {
    setTimeout(function() {
        var one = document.getElementById("test").offsetTop;
        one++;
        document.getElementById("test").style.top = one + "px";
        if (one == height) {
            one == 0;
            document.getElementById("test").style.top = 0;
        }
        TB();
    }, 2);
}
TB();

私の完全なコードやプレビューをご覧になりたい場合は、JSFiddle をセットアップしました: http://jsfiddle.net/JqVb9/。前もって感謝します。

4

1 に答える 1

0

はい、アニメーションの場合は常に現在の時刻を確認する必要があります - setTimeout/. Interval絶対に信頼できず、ドリフトする傾向があります。

これを行うには、Date.now()アニメーションを使用して数学関数を作成し、時間から位置を取得します (最も簡単なのは直線的な動きです)。

@JanDvorak がコメントで既に指摘しているように、同じタイマーからすべての動きを実行することを検討する必要があります。これにより、DOM/スタイリングをあまり頻繁に変更しないため、アニメーションがよりスムーズになります。通常、各フレームは一度だけレンダリングされます。また、これにより同期が確保されます。

于 2012-11-03T19:14:07.077 に答える