-4

さて、画面に雪片が落ちる小さなアニメーションがあり、setTimeoutそれを動かすために使用しました。私はこれまでのところ（少なくともChromeでは）見た目が気に入っています。現在、相互互換性に取り組んでおり、Firefoxを見ていますが、動きが非常に遅いです。正直なところ、このsetTimeout関数は5msに設定されており、5 msごとに1pxしか移動しません（200 fpsの速度）が、その速度で実行する必要があります。それを回避するための巧妙なハックはありますか？Firefoxはどのくらいの速度で関数を繰り返しますか？また、補足：IE9でも機能しません（<8は気にしません）。それらは1秒間移動し、画面の下部に到達してから停止します（上部から再開したい）。
どんな助けでも大歓迎です！

あなたがスキップしない場合の私のコード（あなたがそれを通り抜けたい場合）"//begin actual function"：

var width = window.outerWidth;  
var height = window.outerHeight;  
//foreground  
var curWidth = width - 90;  
var h2 = height * 5;  
var tbvar;  
function TB() {  
//random flake  
var flakeSrc = ['images/1.png','images/2.png','images/3.png','images/4.png'];  
var randImg1 = Math.floor(Math.random() * flakeSrc.length );  
var randImg2 = Math.floor(Math.random() * flakeSrc.length );  
var randImg3 = Math.floor(Math.random() * flakeSrc.length );  
var randImg4 = Math.floor(Math.random() * flakeSrc.length );  
var randImg5 = Math.floor(Math.random() * flakeSrc.length );  
//random horizontal position array  
var left = [];  
var one = 1;  
do {  
        one++;  
        left.push(one)  
    }  
    while (one <= curWidth);  
    var rand1 = Math.floor(Math.random() * left.length );  
    var rand2 = Math.floor(Math.random() * left.length );  
    var rand3 = Math.floor(Math.random() * left.length );  
    var rand4 = Math.floor(Math.random() * left.length );  
    var rand5 = Math.floor(Math.random() * left.length );  
    //////////////begin actual function/////////////////////////////////////////////  
    clearTimeout(tbvar);  
    tbvar=setTimeout(function(){  
        //find top positions  
        var top1 = document.getElementById("flake1").offsetTop;  
        var top2 = document.getElementById("flake2").offsetTop;  
        var top3 = document.getElementById("flake3").offsetTop;  
        var top4 = document.getElementById("flake4").offsetTop;  
        var top5 = document.getElementById("flake5").offsetTop;  
        //add 1  
        top1++;  
        top2++;  
        top3++;  
        top4++;  
        top5++;  
        //change top positions  
        document.getElementById("flake1").style.top = top1 + "px";  
        document.getElementById("flake2").style.top = top2 + "px";  
        document.getElementById("flake3").style.top = top3 + "px";  
        document.getElementById("flake4").style.top = top4 + "px";  
        document.getElementById("flake5").style.top = top5 + "px";  
        //end of screen statements  
        if (top1 == height) {  
            //top1 == "-180px";  
            document.getElementById("flake1").style.top = "-180px";  
            document.getElementById("flake1").style.left = rand1 + "px";  
            document.getElementById('flake1').src = flakeSrc[randImg1];  
        }  
        if (top2 == height) {  
            //top2 == "-180px";  
            document.getElementById("flake2").style.top = "-180px";  
            document.getElementById("flake2").style.left = rand2 + "px";  
            document.getElementById('flake2').src = flakeSrc[randImg2];  
        }  
        if (top3 == height) {  
            //top3 == "-180px";  
            document.getElementById("flake3").style.top = "-180px";  
            document.getElementById("flake3").style.left = rand3 + "px";  
            document.getElementById('flake3').src = flakeSrc[randImg3];  
        }  
        if (top4 == height) {  
            //top4 == "-180px";  
            document.getElementById("flake4").style.top = "-180px";  
            document.getElementById("flake4").style.left = rand4 + "px";  
            document.getElementById('flake4').src = flakeSrc[randImg4];  
        }  
        if (top5 == height) {  
            //top5 == "-180px";  
            document.getElementById("flake5").style.top = "-180px";  
            document.getElementById("flake5").style.left = rand5 + "px";  
            document.getElementById('flake5').src = flakeSrc[randImg5];  
        }  
        TB();  
    }, 5);  
}  
TB();

プロジェクト全体の動作を確認したい場合：http：//fudgepants.com/snow/snow.html

私が話しているのは、小さな雪ではなく、大きな雪です。
ありがとう！

4

1 に答える 1

1

コードに関するいくつかのコメント:

function TB() {  
  //random flake  
  var flakeSrc = ['images/1.png','images/2.png','images/3.png','images/4.png'];

その配列は静的であるため、呼び出しごとに作成されないように、関数の外に配置する必要があります。

  var randImg1 = Math.floor(Math.random() * flakeSrc.length );

flakeSrc.length変化しないので、長さを保存して参照してください。Math.floorまた、ビットごとの OR 演算子を使用して置き換えることもできます。

  var randImg1 = Math.random() * flakeSrc.length | 0;

.

do {  
        one++;  
        left.push(one)  
    }  
    while (one <= curWidth);

それは無意味に思えます。すべての呼び出しでそれを行うことは、多くの CPU サイクルを浪費するだけです。leftは値 にのみ使用され、left.lengthと同じ値になりますcurWidth。

    var rand1 = Math.floor(Math.random() * left.length );

上記のように、left.lengthは複数回使用され、 と同じですが、curWidth読み取りが遅くなります。

等々...

グローバル変数を回避するには、すぐに呼び出される関数式ですべてをラップすることを検討してください。

于 2012-11-05T04:37:43.823 に答える