0

HTML5で再現したいフレームごとのアニメーションがあります。

たとえば、ボールなどの1つの要素と、次のようなキーフレームがあります。

var x = new Array(102,130,140,200);
var y = new Array(52,120,240,400);
var opacity = new Array(0,0.2,0.5,0.3); // I am assuming opacity goes from 0 to 1

これらの4つの位置は、キーフレーム1、2、3、および4のボール位置のx、y、および不透明度を表します。

各キーフレームは、たとえば1/30秒ごとに呼び出されます。アニメーション化する要素（この例ではボール）は、png画像です。

キャンバス上でそのボールをアニメートするにはどうすればよいですか？

私はこのコードを見つけました：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1 / 30);
        };
      })();

      function animate() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // update stage

        // clear stage
        context.clearRect(0, 0, canvas.width, canvas.height);

        // render stage

        // request new frame
        requestAnimFrame(function() {
          animate();
        });
      }

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

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
  </body>
</html>

しかし、このコードは、そこでアニメーション化するオブジェクトをどのように含めるかを示していません...

助けていただければ幸いです。ありがとう。

4

1 に答える 1

0

まず、ボールを表すオブジェクトを作成する必要があります。次に、私の観点から、ベストプラクティスはx、y座標などvelocityのプロパティを追加massすることです。これらは、オブジェクトリテラルを使用するか、各プロパティを個別に割り当てることで定義できます。 。それはあなた次第です。このようにして、将来の再利用の基盤ができます。

これは、コードを構築できる可能性の1つです。レンダリング関数を初期化から分離することにより、元の関数を少し変更しました。これは最適化に関するものです。

function Ball(ctx, x, y, rad) {
    this.x = x;
    this.y = y;
    this.rad = rad;
    this.vx = 0;
    this.vy = 0;
    this.mass = 0;

    this.createBall = function() {
        ctx.fillStyle = '#rgba(38,85,139,1)';
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.rad, 2*Math.PI, false);
        ctx.closePath();
        ctx.fill();        
    };

    this.update = function() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        if (this.x > canvas.width) {
            this.x = canvas.width - 1;
            this.vx *= -1;
        }            
        //...        
    };
}

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

function init() {    
    var numBalls = 100;
    var ballPool = [];
    var width = canvas.width;
    var height = canvas.height;
    var ball = new Ball(context, Math.random() * width, Math.random() * height,
                        (Math.random() * 10 - 5) + 2);

    for (var i = 0; i < 100; i++)
        ballPool.push(ball);        
      }
}

function animate() {
    var len = ballPool.length;
    var ball = null;

    for (var i=0; i < len; i++) {
        ball = Ball(ballPool[i]);
        ball.update();
    }
}

window.onload = init();     
requestAnimFrame(animate);

ノート

私はコードをテストしませんでした、私はアイデアを得るためだけにそれを作ります。補足：キーフレームを使用するようにコードを作成しませんでしたが、キーフレームを使用することも可能です。スムーズな移行のために必要なのは、座標の大きなプールだけです。

于 2012-07-14T06:39:04.067 に答える