0

我正在使用 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>
4

1 回答 1

0

我可能有一个解决方案，只要让我知道这是否有效：

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

每当您想附加到您的转换时，您都必须添加...您的 transform()，您似乎是通过重新调整窗口大小来完成的。

于 2013-08-03T20:40:25.267 回答