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/

來源

2013-10-30 Andrew

你能提供一個鏈接到住落實明白你的意思，或仍好小提琴，我們還可以編輯和測試 – Ani

當然安仁，這裏是對的jsfiddle上述代碼的鏈接。你應該在Chrome和FF中試用它。 http://jsfiddle.net/cantino/yr8Zr/ – Andrew

是，目前FF產生更少的平滑的動畫。

使用frame.timeDiff節流幀每秒，
，並減少你的振幅：

您可以通過獲得更流暢的，但是，速度較慢的動畫效果。

如果更平滑 - 但更慢打破您的設計，您可以使用自定義Kinetic.Shape「更接近金屬」。

使用Kinetic.Shape，您將獲得一個畫布上下文，而不是依賴於更容易（但性能更低）的Kinetic.Rect。

來源

2013-10-30 15:46:03 markE

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

來源

2015-02-07 03:25:37

Kinetic.js在Firefox上很慢

回答

相關問題