2

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

4

2 回答 2

1

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

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

  • 使用 frame.timeDiff 来限制每秒帧数，
  • 并减少你的幅度。

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

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

于 2013-10-30T15:46:03.017 回答
1

我知道这个问题很久以前就已经回答了，但我最近也遇到了这个问题，这里提供的答案只给了一点性能提升。所以我研究了 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.
于 2015-02-07T03:25:37.587 回答