KineticJS onFrame медленный и рывкий

Question

В принципе, если я использую stage.onFrame(function(frame){animationLayer.draw()});, тогда я получаю отрывистую анимацию, но если я сделаю что-то вроде setInterval(draw, 25);, а затем animationLayer.draw(); вничью, то получаю приятную плавную анимацию.

Я делаю что-то не так с KineticJS или это просто немного сосать на производительность? Я только вращал прямоугольник, но он казался таким отрывистым.

Это хуже в хроме, чем в firefox, но 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 
    } 

Благодаря

Edit: Оказывается, что Chrome виноват некоторые из вопросов здесь, недавнее обновление было вызывает некоторые проблемы.

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/