动态.js在火狐浏览器上很慢

Kinetic.js slow on Firefox

本文关键字：火狐浏览器 js 动态      更新时间：2023-09-26

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

是的，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.
相关文章：