CSS背景位置：動畫效果和性能

我見過很多用於動畫元素背景位置的例子，以產生漂亮的滾動背景。CSS背景位置：動畫效果和性能

這些示例還傾向於在重置計數器中編寫腳本，以在特定數量的像素之後將背景位置置於其原始位置。

我的問題是：永不重置平鋪背景的背景位置是否可行？隨着時間的推移，這自然會產生非常大的背景位置值，但是如果瀏覽器性能沒有顯着差異，則可能是好的。我已經在8小時內測試過IE，Firefox和Chrome，但似乎沒有任何負面影響，儘管我的盒子速度相對較快。

回答「爲什麼不重置？」問題，它只是歸結爲簡單。我爲許多背景元素設計了動畫，每個背景元素都有不同的X/Y比例，因此無需計算完全是像素的完美時間切換時間，這將使我的生活更輕鬆。

任何人都有這個想法？

來源

2009-11-20 webguydan

這自然會產生非常大的背景下，位置值隨着時間的推移

是的，這最終可能成爲一個問題，如果你的代碼是這樣

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

當n達到高數（通常爲1000000000000000000000）時，其toString將切換爲指數表示，最終嘗試設置：

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

這是一個明顯的錯誤。有可能一些佈局引擎可能會提前釋放，也許可能是31個像素。但即便如此，如果您以每秒60次（例如）32像素來動畫，則仍需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-20 20:37:22 bobince

我認爲你會遇到某種溢出，但如果你在8小時的時間內測試它，那麼瀏覽器不可能溢出。這只是猜測。

來源

2009-11-20 19:40:57 Samuel

CSS背景位置：動畫效果和性能

回答

相關問題