javascript - Kinetic.js 在 Firefox 上运行缓慢

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，您可以获得一个 Canvas 上下文来绘制，而不是依赖更简单(但性能较低)的 Kinetic.Rect。