Kinetic.js在Firefox上很慢

问题描述：

我在使用Firefox中的Kinetic.js获得流畅的动画时遇到了很多麻烦。它在Chrome和Safari中看起来很棒，甚至在IE9中看起来好像还不错，但是Firefox却不稳定。我尝试使用内置的Kinetic.Animate和requestAnimationFrame，并且两者看起来都一样。有任何想法吗？Kinetic.js在Firefox上很慢

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

你能提供一个链接到住落实明白你的意思，或仍好小提琴，我们还可以编辑和测试 – Ani

当然安仁，这里是对的jsfiddle上述代码的链接。你应该在Chrome和FF中试用它。 http://jsfiddle.net/cantino/yr8Zr/ – Andrew

答

是，目前FF产生更少的平滑的动画。

使用frame.timeDiff节流帧每秒，
，并减少你的振幅：

您可以通过获得更流畅的，但是，速度较慢的动画效果。

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

使用Kinetic.Shape，您将获得一个画布上下文，而不是依赖于更容易（但性能更低）的Kinetic.Rect。

谢谢markE！ Kinetic.Shape和Kinetic.Rect之间的性能差异有多大？ – Andrew

速度更快（因为比像rect这样的完全托管对象的开销更小）。 – markE

我应该早些提到它，但是如果你不需要在你的rects上发生事件，你可以停止监听它们上的事件。这在性能上也有很大的不同。（在你的rect定义中，添加“listen：false”）。 – markE

答

我知道很久以前这个问题已经回答了，但是最近我也遇到了这个问题，并且这里给出的答案仅仅提高了边际性能。因此，我看着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.

Kinetic.js在Firefox上很慢

相关推荐