替代定时器的requestAnimationFrame
作者:互联网
动画
#status{ border:1px solid #ff9900; width:50px; height:100px; left:0; position: absolute; }
<div id="status">123</div>
let div = document.getElementById('status'); let val = div.offsetWidth function updateProgress(){ val = val + 5 div.style.width = val+"px" if(parseInt(div.style.width) < 500){ requestAnimationFrame(updateProgress); }else{ cancelAnimationFrame(updateProgress) } } requestAnimationFrame(updateProgress);
let div = document.getElementById('status'); let val = div.offsetWidth var flag = true; var left = 0; var rafId = null //当前执行时间 var nowTime = 0; //记录每次动画执行结束的时间 var lastTime = Date.now(); //我们自己定义的动画时间差值 var diffTime = 100//增大值降频,人工抖动 function render() { if(flag == true){ if(left>=100){ flag = false } val = val + 5 div.style.width = val+"px" div.style.left = ` ${left++}px` }else{ if(left<=0){ flag = true } val = val - 5 div.style.width = val+"px" div.style.left = ` ${left--}px` } } (function animloop() { //记录当前时间 nowTime = Date.now() // 当前时间-上次执行时间如果大于diffTime,那么执行动画,并更新上次执行时间 if(nowTime-lastTime > diffTime){ lastTime = nowTime render(); } rafId = requestAnimationFrame(animloop); // if(left == 50){ // cancelAnimationFrame(rafId) // } })();
标签:style,定时器,val,requestAnimationFrame,updateProgress,var,div,替代,left 来源: https://www.cnblogs.com/liufeiran/p/16433515.html