0

我有一个逐帧动画，我想在 HTML 5 中重新创建。

例如，我有一个元素，例如一个球，以及像这样的关键帧：

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

这四个位置代表关键帧 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。您可以使用对象文字或单独分配每个属性来定义这些. 由你决定。这样，您就有了未来可重用性的基础。

这是您可以构建代码的可能性之一。我通过将渲染函数与初始化分开来稍微修改了原始函数。这仅用于优化问题。

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 回答