| requestAnimationFrame详解 | 您所在的位置：网站首页 › requestanimationframe如何使用 › requestAnimationFrame详解 |
|
为什么要说它，源于看到的一道面试题：问题是用js实现一个无限循环的动画。 首先想到的是定时器 Document #e{ width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; zoom: 1; } var e = document.getElementById("e"); var flag = true; var left = 0; function render() { if(flag == true){ if(left>=100){ flag = false } e.style.left = ` ${left++}px` }else{ if(left=100){ flag = false } e.style.left = ` ${left++}px` }else{ if(left=100){ flag = false } e.style.left = ` ${left++}px` }else{ if(left=100){ flag = false } e.style.left = ` ${left++}px` }else{ if(left diffTime){ lastTime = nowTime render(); } requestAnimationFrame(animloop); })() 附上一个效果： 2019-10-10 at 10.58.30.gif到此结束了。欢迎吐槽！ |
| CopyRight 2018-2019 实验室设备网 版权所有 |