3

我已经看到了许多动画元素的背景位置以产生漂亮的滚动背景的例子。

这些示例还倾向于在重置计数器中编写脚本，以在一定数量的像素之后将背景位置置于其原始位置。

我的问题是：永远不要为平铺背景重置背景位置是否可行？随着时间的推移，这自然会产生非常大的背景位置值，但如果浏览器性能没有显着差异，它可能没问题。我在 8 小时内测试了 IE、Firefox 和 Chrome，似乎没有任何负面影响，尽管我的盒子相对较快。

回答“为什么不重置？” 问题，它归结为简单。我正在为许多背景元素制作动画，每个元素都具有不同的 X/Y 比率，因此不必计算究竟何时是像素完美的切换时间会让我的生活更轻松。

有人对此有想法吗？

4

2 回答 2

4

随着时间的推移，这自然会产生非常大的背景位置值

是的，如果你的代码像这样，那最终可能会成为一个问题

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

当 n 达到很高的数字（通常为 10000000000000000000000）时，它toString会切换到指数表示，最终会尝试设置：

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

这是一个明显的错误。一些布局引擎可能会更早退出，可能是 1<<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-20T20:37:22.693 回答
1

我认为您会遇到某种溢出，但是如果您在 8 小时内对其进行测试，则不太可能使浏览器溢出。这只是猜测。

于 2009-11-20T19:40:57.777 回答