requestAnimationFrame基本功能理解

ESS新增,ie10以上才兼容

语法格式:requestID = window.requestAnimationFrame(callback);

功能:非常类似setTimeout,此函数会每秒运行大约60次,具体系统会根据闲忙情况合理调度,让动画感觉更平滑。

返回值:requestID 是一个长整型非零值,作为一个唯一的标示符。

案例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #progress{
            width: 5px;
            height: 10px;
            background: #008000;
        }
    </style>
</head>
<body>
<div id="progress"></div>
<script>
    var box = document.getElementById("progress");
    box.style.width = "100px";
    var i = 0;
    var timer = 0;
    //定时器   递归函数
    function F(){
        i+=5;
        box.style.width = i+"px";
        if(i<800){
            timer = requestAnimationFrame(F);
        }
    }
    requestAnimationFrame(F,50);

</script>
</body>

  

猜你喜欢

转载自www.cnblogs.com/dan0217/p/8874087.html