如何改進我對RaphaëlJS圖像動畫的使用？

我使用RaphaëlJS永久旋轉圖像。你可以看到當前結果here。但是，在多次調整瀏覽器窗口大小後，我遇到了一些性能問題。如何改進我對RaphaëlJS圖像動畫的使用？

難道是每次窗口大小調整時都會創建新的動畫，而舊的動畫不會被刪除？如果是這種情況，我該如何阻止並移除它們？如果不是這種情況，對我如何提高性能有任何想法？

的代碼是這樣的：

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     background-color: black; 
     width: 100%; 
     height: 100%; 
     margin: 0px; 
     padding: 0px; 
    }  
    </style> 
    <script type="text/javascript" src="raphael.js"></script> 
    </head> 
    <body> 
    <canvas id="canvas"></canvas> 
    <script> 
     var canvas = document.getElementById('canvas'); 
     canvas.width = window.innerWidth; 
     canvas.height = window.innerHeight; 

     var gearImageSrc = "images/gear.png"; 
     var nikaImageSrc = "images/nika_half.png"; 
     var logoImageSrc = "images/logo_mp.png"; 

     var paper; 
     var gearImage = new Image(); 
     var nikaImage = new Image(); 
     var logoImage = new Image(); 
     gearImage.src = gearImageSrc; 
     nikaImage.src = nikaImageSrc; 
     logoImage.src = logoImageSrc; 

     showAll = function() {   
      paper = Raphael(0, 0, canvas.width,canvas.height); 
      gear = paper.image(gearImageSrc, canvas.width/2 - gearImage.width/4, canvas.height/2 - gearImage.height/3, gearImage.width/2, gearImage.height/2); 
      nika = paper.image(nikaImageSrc, canvas.width/2 - nikaImage.width/4, canvas.height/2 - nikaImage.height/3, nikaImage.width/2, nikaImage.height/2); 
      logo = paper.image(logoImageSrc, canvas.width/2 - logoImage.width/4, canvas.height/2 + gearImage.height/6, logoImage.width/1.5, logoImage.height/1.5);   
      var spin = Raphael.animation({transform: "r-360"}, 10000).repeat(Infinity); 
      gear.animate(spin); 
     }  

     function resizeCanvas() { 
      canvas.width = window.innerWidth; 
      canvas.height = window.innerHeight; 

      paper.remove(); 
      showAll(); 
     } 

     window.addEventListener('resize', resizeCanvas, false); 

     window.onload = function() { 
      showAll(); 
     } 

    </script> 
    </body> 
</html>

來源

2013-08-02 jgg

我剛剛檢查了網站。它似乎沒有做你說的奇怪的事情。也許更改10000到15000以獲得更多的流動性 – Brian

您是否嘗試過調整過幾次？改變時間值會使齒輪緩慢旋轉，這不是我想要的。 – jgg

我建議你使用TwinMax JS從greensock做任何動畫，你不會因此而減慢速度。 – Neil

我可能有這方面的解決方案，只是讓我知道，如果這個工程：

var spin = Raphael.animation({transform: "...r-360"}, 10000).repeat(Infinity);

你必須在添加...您的變換（）時你想追加到你的變換，你似乎正在通過重新調整窗口的大小。

來源

2013-08-03 20:40:25 Brian

它似乎沒有改變性能問題。 – jgg

如何改進我對RaphaëlJS圖像動畫的使用？

回答

相關問題