KineticJS onFrame이 느리고 번쩍입니다.

기본적으로 stage.onFrame(function(frame){animationLayer.draw()});을 사용하면 나는 멍청한 애니메이션을 얻지 만, setInterval(draw, 25);과 그 다음에 animationLayer.draw();과 같이하면 멋진 부드러운 애니메이션을 얻을 수 있습니다.KineticJS onFrame이 느리고 번쩍입니다.

KineticJS에 문제가 있습니까? 아니면 성능면에서 약간 짜증이 났습니까? 나는 사각형 만 회전시키고 있었지만 너무 번쩍 거립니다.

크롬이 파이어 폭스보다 나빠지지만 파이어 폭스는 여전히 부드럽 지 않습니다.

누구나 어떤 아이디어가 있습니까?

var debug, stage, animationLayer; 
    var sw, sh; 
    var spinRect; 

    var blobArray = []; 

    window.onload = function() { 
     debug = document.getElementById('debug'); 

     stage = new Kinetic.Stage({container: "kineticdiv", width: 700, height: 400}); 
     animationLayer = new Kinetic.Layer();  
     sw = stage.attrs.width; 
     sh = stage.attrs.height; 

     spinRect = new Kinetic.Rect({ 
      x: sw/4*3, 
      y: sh/2, 
      width: 50, 
      height: 50, 
      fill: "#eee", 
      stroke: "#777", 
      strokeWidth: 2, 
      centerOffset: { 
       x: 25, 
       y: 25 
      } 
     }); 

     var centerRect = new Kinetic.Rect({ 
      x: sw/4-5, 
      y: sh/2-5, 
      width: 10, 
      height: 10, 
      fill: "cyan", 
      stroke: "black", 
      strokeWidth: 2 
     }); 

     animationLayer.add(spinRect); 
     animationLayer.add(centerRect); 
     stage.add(animationLayer); 

     setInterval(update, 25); // 33 ms = 30 fps, 25 ms = 40 fps 

     stage.onFrame(function(frame){animationLayer.draw()}); 
     stage.start(); 
    }; 

    function update() 
    { 
     spinRect.rotate(0.03); //Math.PI/100); // even removed this for less calculations 
     // animationLayer.draw() // smoother if I use this instead 
    }

감사

편집 : 크롬 여기에 몇 가지 문제에 대한 책임이 있음을 밝혀, 최근의 업데이트는 몇 가지 문제를 야기하고있다.

출처

2012-04-28 Adam K Dean