KineticJS onFrame是缓慢和生涩

Question

基本上，如果我使用stage.onFrame(function(frame){animationLayer.draw()});然后我得到一个生涩的动画，但如果我做setInterval(draw, 25);然后animationLayer.draw();绘制，然后我得到一个很好的流畅的动画。

我在做KineticJS的问题还是只是有点糟糕的表现？我只是在旋转一个矩形，但看起来很生涩。

Chrome浏览器比Chrome浏览器更糟糕，但Firefox仍然不完全平滑。

任何人有任何想法为什么？

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 
    } 

感谢

编辑：原来，铬是造成这里的一些问题，最近的更新已经造成了一些麻烦。

Answer 1

v3.9.4将在今天晚些时候发布，它有一些重要的动画和转换改进。这个动画是否适合你？

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-animate-position-tutorial/

此外，动画可以干，如果你有很多其他的东西，在同一时间运行。看看这个例子使用了requestAnimFrame，看看这是否是光滑与否（纯JS，无库）：

http://paulirish.com/2011/requestanimationframe-for-smart-animating/