Как я могу улучшить использование анимации изображений 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

Я рекомендую вам любую анимацию с TweenMax JS от greensock, вы не сможете замедлить это. – Neil

я мог бы иметь решение для него, просто дайте мне знать, если это работает:

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

Вы должны добавить ... в вашем преобразования() всякий раз, когда вы хотите добавить к своему преобразованию, что, по-видимому, вы делаете, изменив размер окна.

источник

2013-08-03 20:40:25 Brian

Это не похоже на проблему с производительностью. – jgg

Как я могу улучшить использование анимации изображений RaphaëlJS?

ответ

Смежные вопросы