我已经看过许多动画元素背景位置动画的例子,以产生漂亮的滚动背景。
这些示例也倾向于在重置计数器中编写脚本,以便在一定数量的像素之后将背景位置放在其原始位置。
我的问题是:从不重置平铺背景的背景位置是否可行?随着时间的推移,这自然会产生非常大的背景位置值,但如果浏览器性能没有显着差异,则可能没问题。我已经在8小时内测试了IE,Firefox和Chrome,虽然我的盒子相对较快,但似乎没有任何负面影响。
回答“为什么不重置?”问题,它归结为简单性。我正在为许多背景元素设置动画,每个背景元素具有不同的X / Y比率,因此无需计算何时切换回像素完美的时间将使我的生活更轻松。
有人对此有什么看法吗?
答案 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小时内测试它,那么浏览器就不可能溢出。这只是猜测。