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 办公设备维修网 版权所有 豫ICP备15022753号-3 |