RequestAnimationFrame()
这个方法是关于动画的,详细原因可以阅读相关资料(javascript高级程序设计25章-新兴的API)。
RequestAnimationFrame() 接受一个参数,即在重回屏幕前调用的一个函数(就是动画所执行的函数),这个函数负责改变下一次重新绘制的DOM样式。
循环的方式与setTimeout() 方法一样,全局启动,函数内部调用自身,形成循环。
传入该方法的函数接受一个参数,他是一个时间码,(从1970年一月一日至今的毫秒数--不小啊)表示下一次重新绘制的实际发生时间。
说真的,我不太清楚这个时间有什么用。
然后来贴一个例子:MDN
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var start = null; var d = document.getElementById('SomeElementYouWantToAnimate'); function step(timestamp) { if (start === null) start = timestamp; var progress = timestamp - start; d.style.left = Math.min(progress/10, 200) + "px"; if (progress < 2000) { requestAnimationFrame(step); } } requestAnimationFrame(step);
然后我想做一个轮播的效果,以前做过一次,结果屎一样的效果,至今未不想改囧。决定重新做一个,并且带小点点可以操控,我就不插入图片了。
贴出我的bug,额是代码:
//强行用这个方法=_= //上下轮播,原理是移动img的父元素,将更外层的父元素设置为域外隐藏 overflow:hidden; var qt=document.querySelector('#qt'); window.requestAnimationFrame=window.requestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame; var start= null; var tt= 0, nei, wai; //draw中遇到的问题就是 element.style.top 是一个带单位的字符串,而不是一个数!这一点一定要注意! function draw(){ console.log(parseInt(tt)); if(parseInt(tt)==-1500){ qt.style.top=0+'px'; }else{ qt.style.top=(parseInt(tt)-300)+'px'; } tt=qt.style.top; nei=setTimeout(yc,2000); } function yc(){ requestAnimationFrame(draw); } wai=setTimeout(yc,2000); //下面是小点点操控,当鼠标移入小点点父元素内时正常轮播,点击对应的小点点停止轮播,显示对应的图片,并且捕捉容器的top值,如果不捕捉就会继续上一次轮播的top继续而不是接着你点击的图片继续 window.οnlοad=function(){ var zong=document.querySelector('#zong'); zong.onclick=function(event){ console.log(event.target.id); switch (event.target.id) { case 'id1': clearTimeout(nei); clearTimeout(wai); qt.style.top = 0 + 'px'; tt = qt.style.top; break; case 'id2': clearTimeout(nei); clearTimeout(wai); qt.style.top = -300 + 'px'; tt = qt.style.top; break; case 'id3': clearTimeout(nei); clearTimeout(wai); qt.style.top = -600 + 'px'; tt = qt.style.top; break; case 'id4': clearTimeout(nei); clearTimeout(wai); qt.style.top = -900 + 'px'; tt = qt.style.top; break; case 'id5': clearTimeout(nei); clearTimeout(wai); qt.style.top = -1200 + 'px'; tt = qt.style.top; break; case 'id6': clearTimeout(nei); clearTimeout(wai); qt.style.top = -1500 + 'px'; tt = qt.style.top; break; } }; //最后移除点点区域开始正常轮播,重新启动(其实也可以鼠标移除小点点就开始轮播,一般网站上都是这样,不难实现) zong.οnmοuseleave=function(){ clearTimeout(nei); clearTimeout(wai); tt=qt.style.top || 0; setTimeout(yc,2000); } }
其实做完了还是比较高兴,虽然很简单。
三秒钟以后感觉不对。
零点五秒后发现,不用RequestAnimationFrame()方法也能做啊!我只不过验证了这个方法里的代码能跑!
*!
收获就是setTimeout()里面的RequestAnimationFrame()方法会立即执行不会排队。