Question

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

Answer 1

是的，FF目前产生的动画效果较差。

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

使用frame.timeDiff来限制每秒帧数
减少你的振幅。

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

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

Answer 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.

Firefox上的Kinetic.js变慢了

2 个答案: