JavaScript如何使用setTimeout来实现轮循动画的实例详解
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id='box'></p> <script> var oBox = document.getElementById("box"); var maxLeft = utils.win('clientWidth')-oBox.offsetWidth; var step = 5; var timer = null; //使用递归思想完成setTimeout的轮循动画:每一次在执行动画之前把上一次设置没用的定时器清除掉,节约我们的内存空间 function move(){ window.clearTimeout(timer); var curLeft = utils.css(oBox,"left"); if(curLeft+step >= maxLeft){//边界判断 utils.css(oBox,"left",maxLeft); return; } curLeft+=step; utils.css(oBox,"left",curLeft); timer = window.setTimeout(move,10) } move(); </script> </body> </html>
一直以为动画效果是用setInterval来执行的。也比较好理解,一直执行下去,直到条件再次出现时清除setInterval。
这几天看了用setTimeout来做动画的例子,起初我是不理解的。动画和延迟执行有毛关系(其实是有关系的,后面会讲到。)代码是这样子的:
for ( i=0; i<200; i++){ setTimeout ( function(){ var left = el.style.left ? el.style.left : 0; left = parseInt( left ) +1; el.style.left = left+ "px"; } , i ); }
代码就是以上样子的啦。我当时所不理解的是,为什么每次都要延迟的时间递增?为什么刚好到200px就停止执行了,i明明是时间,为什么和距离的值一样?
首先回答第一个问题,
for循环其实是动画的关键,仅仅执行setInterval 只会使物体位移一次。可以先分析代码:当i为0的时候,物体移动1px,当 i 为1的时候,left为2px, 延迟了1毫秒。。。。当i为99的时候,left为100px,延迟99毫秒执行。。。当i为199的时候,left为200px,延迟199毫秒执行。。。延迟的时间与物体的移动呈递增状态。
所以,从单方面看,延迟和动画没有必然关系。但是从连续的角度(for循环起了作用),根据我们的视觉暂留,就形成了动画,用张图来表示:
循环起来,就形成了动画效果。
第二个问题:
当动画结束时,恰巧距离是200,这和i有什么关系呢?其实没有直接关系。只是当i自增1的时候,left也恰好是自增i,如果将left的值每次都加3,那么看到的就是不一样的结果了。(最终应该是600,还是有关系的,因为循环了200次)。
以上就是JavaScript如何使用setTimeout来实现轮循动画的实例详解的详细内容,更多请关注其它相关文章!
上一篇: 继承Function类,自定义backward函数求loss
下一篇: 空间