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);
                  };
        })();

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

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

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

我尝试的一件事是每层卸载不同数量的节点。每层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的舞台上添加红色圆圈，然后将其删除。

使用KineticJS提高动画性能

1 个答案: