CSS background-position:动画和性能

时间:2009-11-20 19:37:16

标签: css animation background-position

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

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

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

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

有人对此有什么看法吗?

2 个答案:

答案 0 :(得分:4)

  

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

是的,如果您的代码类似

,那最终可能会成为一个问题
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';
   ...

答案 1 :(得分:1)

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