1

有人问了一个关于性能的类似问题，但我无法从结果答案中学到任何东西。

我需要有许多不同大小的球体在夜空中动画，就好像它们向上漂浮一样。我发现我修改的一些代码没有库并且是纯画布。我制作的演示效果很好，即使有许多粒子使用请求动画帧，动画也非常流畅。

在此处查看演示：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);
                  };
        })();

这些球体中的每一个都需要在悬停时停止动画，并在点击时动画到浏览器窗口的中心。我已经能够使用 kineticJS 实现这一点，但是我完全失去了使用纯画布的性能。

见这里：http: //jsfiddle.net/kennygfunk/Ly7Cs/1/

我的问题是，我如何提高性能并仍然具有该功能。我目前在使用我可以改进的 kineticJS 做什么。

我尝试过的一件事是每层卸载不同数量的节点。每层5个，每层10个。这似乎没有多大帮助。

你能给我的任何东西都将不胜感激。谢谢社区！

4

1 回答 1

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，然后将其删除。

于 2013-11-09T03:52:20.060 回答