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 に答える