CSS背景位置：动画和性能

Question

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

这些例子往往还会编写重置计数器的脚本，以在一定数量的像素后将背景位置放回其原始位置。

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

回答“为什么不重置？”的问题，归根结底就是简单。我正在动画化许多背景元素，每个元素都具有不同的X/Y比率，因此不必计算何时完美地切换回来的像素时间，这将使我的生活更轻松。

有人对此有什么想法吗？

- webguydan

Answer 1

这会导致随着时间的推移，背景位置值变得非常大

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

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

当 n 达到一个很大的数字（通常为1000000000000000000000）时，它的toString会切换为指数表示法，这将尝试设置：

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

这是一个明显的错误。一些布局引擎可能会在更早的时候退出，例如在1<<31像素处。但即使如此，如果您每秒以32像素的速度动画播放某些内容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';
   ...

- bobince

Answer 2

我认为你可能会遇到某种溢出情况，但如果你在8小时的时间段内进行测试，那么很难使浏览器溢出。这只是猜测。

- Samuel