Canvas 动画帧函数(requestAnimationFrame()),流畅动画


demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        /*
        * 请求动画帧函数,这个函数和setTimeout方法使用类似,
        * 他都是定时器,区别在于setTimeout可以自由指定回调的触发时间,
        * 而requestAnimationFrame函数回调的触发是由浏览器来控制的。
        *
        * requestAnimationFrame( callback )
        * 备注:当浏览器重绘页面的时候,就会调用这个callback,
        * 这样callbackg的执行就会比较稳定,适合用来做流畅的动画。
        * */

        /*setInterval( function() {
            console.log(111);
        }, 50);*/

        /*function con() {
            console.log(111);
            setTimeout( con, 50);
        }
        setTimeout( con, 50);*/

        // 简化setTimeout不断执行回调的方式
        /*(function con() {
            console.log(111);
            setTimeout( con, 50);
        }());*/

        // 把setTimeout改为requestAnimationFrame
        (function con() {  //con就是画每一帧动画的函数。
            console.log(111);
            requestAnimationFrame( con );  //动画更流畅  实现setInterval的效果
        }());
    </script>
</body>
</html>


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页