前端学习笔记--requestAnimationFrame优化动

requestAnimationFrame，顾名思义就是请求动画帧，是html5 提供一个专门用于请求动画的API，当需要更新屏幕画面时就可以调用此方法。

• 与setTImeout和setInterval不同，requestAnimationFrame不需要传入时间间隔，使用requestAnimationFrame，浏览器能够优化并行的动画，保证回调函数在屏幕每一次的刷新间隔中只被执行一次，因此能够更加流畅的执行动画效果。

• requestAnimationFrame（）使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

example

css：
--------------------------------------
<style>
    div{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
--------------------------------------
html：
<div id="SomeElementYouWantToAnimate"></div>
--------------------------------------
 js：
<script>
    var start = null;
    var element = document.getElementById('SomeElementYouWantToAnimate');
    element.style.position = 'absolute';

    function step(timestamp) {
        // timestamp时间戳
        if (!start) start = timestamp;
        var progress = timestamp - start;
        element.style.left = Math.min(progress / 10, 200) + 'px';
        if (progress < 2000) {
            window.requestAnimationFrame(step);
        }
    }

    window.requestAnimationFrame(step);
</script>