Javascript Kinetic.js在Firefox上运行缓慢

我在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>

$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：1000，
身高：1000
});
var layer=新的动能层（）；
var blackRect=新的动能.Rect({
x:700，
y:650，
宽度：300，
身高：620，
填充：“黑色”，
偏移量：[150620]
});
var colorRect=新的动能.Rect({
x:300，
y:650，
宽度：300，
身高：620，
填充：“蓝色”，
偏移量：[150620]
});
layer.add（blackRect）；
layer.add（colorRect）；
阶段。添加（层）；
函数振荡（节点、时间）{
var周期=5400；
无功相位=1200；
var振幅=1.2；
var移位=振幅*数学cos（相位+时间*2*数学PI/周期）；
setPosition（node.getX（）+shift，node.getY（））；
}
函数旋转（节点、时间）{
var周期=5400；
var振幅=0.08；
node.setRotation（（振幅*Math.sin（时间*2*Math.PI/周期））；
}
函数渲染（时间）{
layer.draw（）；
}
var anim=新的动能动画（函数（帧）{
振荡（blackRect，帧时间）；
振荡（彩色、帧、时间）；
旋转（blackRect，frame.time）；
旋转（colorRect、frame.time）；
}，层）；
anim.start（）；
});

编辑：

---

下面是上面的示例：

是的，FF当前生成的动画不太平滑

您可以通过以下方式获得更平滑但速度较慢的动画结果：

• 使用frame.timeDiff调节每秒的帧数
• 降低你的振幅

如果更平滑但速度较慢，则可以使用自定义的Kinetic.Shape“更接近金属”

---

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

我知道这个问题很久以前就得到了回答，但我最近也遇到了这个问题，这里提供的答案只提供了少量性能提升。 因此，我研究了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. 

---

您是否可以提供一个指向live实现的链接来理解您的意思，或者更好地提供一个FIDLE，我们还可以在其中编辑和测试Ani，这里是指向JSFIDLE上上述代码的链接。你应该在Chrome和FF中试用。谢谢你，马克！Kinetic.Shape和Kinetic.Rect之间的性能差异有多大？它更快（因为与完全管理的对象（如Rect）相比，开销更小）。我应该在前面提到它，但是如果您不需要Rect上的事件，您可以停止侦听它们上的事件。这在性能上也有很大的不同。（在rect定义中，添加“侦听：false”）。