zoukankan      html  css  js  c++  java
  • requestAnimationFrame与setInterval,setTimeout

    自打学习canvas动画以来,都说requestAnimationFrame好,就一直用,也没觉得有什么太过于特殊的地方,直到刚才,在写完前面的"小球碰撞墙壁----干掉误差"之后,,突然想去看看如果这里改回setInterval,会是个什么样,差距究竟有多大?

    结果....一看吓一跳,差距太大了,说难听点,setInterval...简直像屎一样

    具体结果,只需要将前面那篇里面的gamleLoop方法和该方法前面的那句gameLoop()  替换成下面的代码,一看就知道了.

    function gameLoop(){
        
        ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
        ball.draw(ctx);
        ball.update();
    }    
    
    setInterval(gameLoop,30)

    不亲自做实践,就没法取得进步,果真是这样.

    requestAnimationFrame简易可兼容的方法

    window.requestAnimFrame = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
            function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
                return window.setTimeout(callback, 1000 / 60);
            };
    })();

    较为完整的方法

    (function() {
        var lastTime = 0;
        var vendors = ['webkit', 'moz'];
        for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // Webkit中此取消方法的名字变了
                                          window[vendors[x] + 'CancelRequestAnimationFrame'];
        }
    
        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = function(callback, element) {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
                var id = window.setTimeout(function() {
                    callback(currTime + timeToCall);
                }, timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };
        }
        if (!window.cancelAnimationFrame) {
            window.cancelAnimationFrame = function(id) {
                clearTimeout(id);
            };
        }
    }());
  • 相关阅读:
    Android Studio设置字体和主题
    Android 使用shape定义不同控件的的颜色、背景色、边框色
    Linux下mysql的常用操作
    部署腾讯云(CentOS6.6版本,jdk1.7+tomcat8+mysql)
    在linux下如何使用yum查看安装了哪些软件包
    Tomcat下wtpwebapps文件夹 和 webapps文件夹区别
    安卓开源框架SlidingMenu使用
    Android_scaleType属性
    Android_Jar mismatch! Fix your dependencies
    操作系统原理之进程管理(第二章)
  • 原文地址:https://www.cnblogs.com/liqingchang/p/4478038.html
Copyright © 2011-2022 走看看