画布和 Javascript 对象上的 Javascript 动画

Question

我正在玩弄一些画布和简单的动画 - 我有一个简单的类来渲染我的地图。

 var Map = Class.extend({
        init: function () {
            //Setup stuff       
        },
        DrawMap: function (canvas, camera) {
            //Render the map
        }
    });

我的核心应用代码也在类中

 var App = Class.extend({

        init: function (canvas) {
             //Load Stuff
        },

        GameLoop: function () {
            this.map.DrawMap(this.canvas, this.camera);
        }

    });

现在使用下面的代码可以正常工作并且我的地图可以渲染。

    var canvasMap = document.getElementById('cmap');

    app = new App(canvasMap);

    setInterval(function () {
        app.GameLoop();
    }, 100);

但是 - 我知道这并不理想，我正在尝试转换为这个 (http://paulirish.com/2011/requestanimationframe-for-smart-animating/) 所以我调整了我的代码。

我将上面的代码添加到我的索引页

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

并更改了我的初始化代码（用于使用 Set Interval to）

    var canvasMap = document.getElementById('cmap');

    app = new App(canvasMap);

    requestAnimFrame(function() { app.GameLoop(); });

现在基于一些调试，这里发生的是 App.GameLoop 方法被调用一次（我在游戏循环方法中添加了一个日志）。然后不再调用。我想这是根据我对 JS 对象的经验来完成的。我的背景是 C#，所以这对我来说相对较新。

为什么只调用一次？

Answer 1

我已经解决了这个问题，我错过了递归。

   var initAll = function () {
        $(document).ready(function() {

            var canvasMap = document.getElementById('cmap');

            app = new App(canvasMap);
            mainLoop();
        });
    };

    var mainLoop  = function() {
               requestAnimFrame(mainLoop);
                app.GameLoop();
    };