Question

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

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

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

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

有人对此有什么看法吗？

Answer 1

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

是的，如果您的代码类似

，那最终可能会成为一个问题

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

当n达到一个较大的数字（通常为1000000000000000000000）时，其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';
   ...

Answer 2

我认为你会遇到某种溢出，但如果你在8小时内测试它，那么浏览器就不可能溢出。这只是猜测。

CSS background-position：动画和性能

2 个答案: