3

見栄えの良いスクロール背景を生成するために、要素の背景位置をアニメーション化する多くの例を見てきました。

これらの例では、一定量のピクセルの後に背景位置を元の場所に配置するために、リセット カウンターでスクリプトを作成する傾向もあります。

私の質問は次のとおりです。タイル張りの背景の背景位置を決してリセットしないことは可能ですか? これにより、当然、時間の経過とともに非常に大きな background-position 値が生成されますが、ブラウザーのパフォーマンスに大きな違いがない場合は問題ない可能性があります。IE、Firefox、および Chrome を 8 時間にわたってテストしましたが、ボックスは比較的高速ですが、悪影響はないようです。

「なぜリセットしないのですか？」に答えるために。質問、それは単純さに帰着します。私は多くの背景要素をそれぞれ異なる X/Y 比率でアニメートしているので、元に戻すピクセル パーフェクト タイミングを正確に計算する必要がないので、作業が楽になります。

誰でもこれについて考えていますか？

4

2 に答える 2

4

これにより、当然、時間の経過とともに非常に大きな背景位置値が生成されます

はい、コードが次のような場合、最終的に問題になる可能性があります

el.style.backgroundPosition= '0 '+n+'px';

n が大きな数値 (通常は 1000000000000000000000) に達すると、toString指数表現に切り替わり、次のように設定しようとします。

el.style.backgroundPosition= '0 1e21px';

これは明らかなエラーです。一部のレイアウト エンジンは、おそらく 1<<31 ピクセルで早期に救済される可能性があります。それでも、何かを (たとえば) 32 ピクセルで 1 秒間に 60 回アニメーション化したとしても、その段階に到達するにはまだ 12 日かかります。

元に戻すピクセルパーフェクトなタイミングを正確に計算する必要がなくなると、私の人生が楽になります。

%通常、すべてをリセットするのではなく、各カウンターでモジュロ演算子を個別に使用します。

var framen1= 30;     // item 1 has 30 frames of animation
var framen2= 50;     // item 2 has 50 frames of animation
    ...
var framei1= (framei1+1)%framen1; // 0 to 29 then reset
var framei2= (framei2+1)%framen2; // 0 to 49 then reset

または、時間ベースのアニメーションの場合:

var frametime1= 100; // item 1 updates 10 times a second
var frametime2= 40;  // item 2 updates 25 times a second
    ...

var dt= new Date()-t0; // get time since started animation

var framei1= Math.floor(dt/frametime1) % framen1;
var framei2= Math.floor(dt/framelength2) % numberofframes2;

document.getElementById('div1').style.backgroundPosition= '0 '+(framei1*24)+'px';
document.getElementById('div2').style.backgroundPosition= '0 '+(framei2*24)+'px';
   ...
于 2009-11-20T20:37:22.693 に答える
1

なんらかのオーバーフローが発生すると思いますが、8 時間にわたってテストした場合、ブラウザーがオーバーフローする可能性はほとんどありません。それはただの憶測です。

于 2009-11-20T19:40:57.777 に答える