使用 KineticJS 提高动画性能

Improving Animation performance with KineticJS

本文关键字：动画 性能 KineticJS 高动画 使用      更新时间：2023-09-26
有人

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

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

在此处查看演示：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个。这似乎没有多大帮助。

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

你正在使用许多效果。所以性能很低。我认为最好的方法是将节点缓存到图像。

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

相关文章：