Question

我正在使用RaphaëlJS永久旋转图像。您可以看到当前结果here。但是，在多次调整浏览器窗口大小后，我遇到了一些性能问题。

是否可以在每次调整窗口大小时创建新动画而不删除旧动画？如果是这种情况，我该如何停止并删除它们？如果不是这样的话，有什么想法可以提高性能吗？

代码是这样的：

<!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>

Answer 1

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

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

每当你想要附加到变换时，你必须在transform（）中添加...，这似乎是通过重新调整窗口大小来实现的。

如何改进RaphaëlJS图像动画的使用？

1 个答案: