Kinetic.js 在 Firefox 上运行缓慢答案

【问题标题】：Kinetic.js slow on FirefoxKinetic.js 在 Firefox 上运行缓慢
【发布时间】：2015-02-07 11:25:37
【问题描述】：

我在 Firefox 中使用 Kinetic.js 获得流畅的动画时遇到了很多麻烦。它在 Chrome 和 Safari 中看起来很棒，甚至在 IE9 中看起来或多或少还不错，但 Firefox 是生涩的。我尝试同时使用内置的 Kinetic.Animate 和 requestAnimationFrame，结果看起来都一样。有什么想法吗？

<div id="container"></div>

<script>
$(function() {
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 1000,
      height: 1000
    });

    var layer = new Kinetic.Layer();

    var blackRect = new Kinetic.Rect({
      x: 700,
      y: 650,
      width: 300,
      height: 620,
      fill: "black",
      offset: [150, 620]
    });

    var colorRect = new Kinetic.Rect({
      x: 300,
      y: 650,
      width: 300,
      height: 620,
      fill: "blue",
      offset: [150, 620]
    });

    layer.add(blackRect);
    layer.add(colorRect);
    stage.add(layer);

    function oscillate(node, time) {
      var period = 5400;
      var phase = 1200;
      var amplitude = 1.2;
      var shift = amplitude * Math.cos(phase + time * 2 * Math.PI / period);
      node.setPosition(node.getX() + shift, node.getY());
    }

    function rotate(node, time) {
      var period = 5400;
      var amplitude = 0.08;
      node.setRotation((amplitude * Math.sin(time * 2 * Math.PI / period) ));
    }

    function render(time) {

      layer.draw();
    }


    var anim = new Kinetic.Animation(function (frame) {
      oscillate(blackRect, frame.time);
      oscillate(colorRect, frame.time);

      rotate(blackRect, frame.time);
      rotate(colorRect, frame.time);
    }, layer);

    anim.start();
});
</script>

编辑：这是上面的例子：http://jsfiddle.net/cantino/yr8Zr/

【问题讨论】：

您能否提供一个实时实现的链接以了解您的意思，或者更好地提供一个我们也可以编辑和测试的小提琴
当然 Ani，这是 jsfiddle 上上述代码的链接。你应该在 Chrome 和 FF 中尝试一下。 jsfiddle.net/cantino/yr8Zr

标签： javascript animation kineticjs

【解决方案1】：

是的，FF 目前制作的动画不太流畅。

您可以通过以下方式获得更流畅但更慢的动画效果：

使用 frame.timeDiff 限制每秒帧数，
并降低幅度。

如果更平滑但更慢破坏了您的设计，您可以使用自定义 Kinetic.Shape 来“更接近金属”。

使用 Kinetic.Shape，您可以在画布上下文上进行绘制，而不是依赖更简单（但性能较差）的 Kinetic.Rect。

【讨论】：

谢谢马克！ Kinetic.Shape 和 Kinetic.Rect 之间的性能差异有多大？
它更快（因为它的开销比 rect 等完全托管的对象要少）。
我应该在前面提到它，但如果你不需要在你的矩形上的事件，你可以停止监听它们上的事件。这对性能也有很大影响。（在您的 rect 定义中，添加“listening:false”）。

【解决方案2】：

我知道这个问题很久以前就已经回答过了，但我最近也遇到了这个问题，这里提供的答案只对性能产生了边际提升。所以我研究了 KineticJS 的核心，发现了一个修复程序，使我的 FPS 从 10 到接近 60。有时 FPS 下降到 2。

该修复程序适用于将来可能遇到此问题并寻求答案的人。

stage._mousemove = Kinetic.Util._throttle( stage._mousemove, 60);
someKineticLayer._getIntersection = function() {return {};};

//keep in mind that tampering with _getIntersection will disable mouse interaction for that layer and may have other effects.

【讨论】：