使用KineticJS改善動畫性能

Question

有人問過類似的性能問題，但我無法從結果中學到任何東西。

我需要在夜空中設置許多不同大小的球，好像它們是向上漂浮的。 我找到了一些修改后的代碼，這些代碼沒有庫並且是純畫布。 我制作的演示效果完美，即使使用請求動畫幀，即使有很多粒子，動畫也非常流暢。

在此處查看演示： http : //jsfiddle.net/kennygfunk/B3gqa/1/

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

這些球體中的每一個都需要在懸停時停止動畫，並在單擊時動畫化到瀏覽器窗口的中心。 我已經能夠通過dynamicJS實現這一目標，但是我完全失去了使用純畫布的性能。

看到這里： http : //jsfiddle.net/kennygfunk/Ly7Cs/1/

我的問題是，如何提高性能並仍然具有該功能。 我目前對我可以改進的dynamicJS做了什么。

我嘗試過的一件事是卸載每層不同數量的節點。 每層5個，每層10個。 這似乎沒有太大幫助。

您能給我的任何東西將不勝感激。 謝謝社區！

Answer 1

您正在使用許多效果。 因此性能低下。 我認為最好的方法是將節點緩存到圖像。

node.toImage({
    mimeType : "image/png",
    width : random_rad * 2,
    height : random_rad * 2,
    callback : function(img){
        var image = new Kinetic.Image({
            image:img,
            x : random_x
                                      });
        node.destroy();
        layer.add(image);
        animate_lanterns(image, layer);
    }
});

這里只有一層。 我的工作站上的FPS大於60。 示例： http ： //jsfiddle.net/lavrton/eg3xV/

為了進行選擇，您可以將紅色圓圈添加到setStroke舞台中，然后將其刪除。