替代定时器的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)
    // }
})();