如何提高動畫的移動性能？

我需要它在移動工作，以及桌面。最初我通過讓用戶與重疊圖像的SVG圈交互來處理交互，但出於測試目的，我已將其刪除。

目前動畫進行使用事件與setInterval函數：

 $('.roulette').bind('touchstart', function() { 
      if (inMotion == true) { 
       cleanUp(); 
      } 
      intervalvar = setInterval(spinWheel, 24); 
      // spinWheel(); 
      $(document).bind('touchend', function() { 
       count = Math.abs(force) 
       mouseup = 1; 
      }); 
     });

計算進行後，我旋轉輪盤使用此項功能：

 function rotate(a) { 
      roulette.css({ 
       '-webkit-transform': 'rotate(' + a + 'deg)', 
       '-ms-transform': 'rotate(' + a + 'deg)', 
       '-o-transform': 'rotate(' + a + 'deg)', 
       '-moz-transform': 'rotate(' + a + 'deg)', 
       'transform': 'rotate(' + a + 'deg)' 
      }); 
     }

它工作得很好在瀏覽器中，但是當涉及到移動時，它會非常滯後。關於績效如何提高的任何想法？

來源

2013-03-31 styke

CSS3沒問題，但我認爲使用HTML5 canvas會更好。這應該看起來/感覺更好**也**在手機上。 –

請勿對動畫使用setInterval。移動設備具有CSS動畫功能，爲您的動畫使用CSS。但是，如果您確實需要使用requestAnimationFrame而不是setInterval執行JS動畫，並將您的框架與瀏覽器刷新同步。

來源

2013-04-25 22:16:20 Mircea

如何提高動畫的移動性能？

回答

相關問題