Question

我想要在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>

但是这段代码没有显示我将如何包含一个动画对象......

我感谢任何帮助。感谢。

Answer 1

首先，您需要创建一个表示球的对象，然后 - 从我的角度来看 - 最佳做法是添加一些属性，如x和y坐标，{{1} }，velocity等。您可以使用对象文字或分别指定每个属性来定义它们。由你决定。这样您就有了未来可重用性的基础。

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

mass

注意

我没有测试代码，我只是为了得到这个想法。一个注意事项：我没有构建我的代码来使用关键帧，但也可以使用关键帧，只需要一个大的坐标池来实现更平滑的过渡。

HTML 5 - 逐帧动画

1 个答案: