5.2 创建直线运动

优质

小牛编辑

127浏览

2023-12-01

本节，我们创建一个简单的直线运动的动画，来考验一下我们的Animation类。动画的内容是，把一个盒子从画布的左侧移动到右侧。

操作步骤

按照以下步骤，把一个盒子从画布的一侧移动到另一侧：

1. 链接到Animation类：

<head>
<script src="animation.js"> </script>

2. 实例化一个Animation对象，并获取画布上下文对象：

<script>
window.onload = function(){
  var anim  = new Animation("myCanvas"); 
  var canvas  = anim.getCanvas();
  var context  = anim.getContext();

3. 定义盒子的直线运动速度，并创建一个包含位置和尺寸的box对象：

  var linearSpeed  =  100;  // pixels  / second
  var box  =  {
    x:  0,
    y: canvas.height  /  2  -  25, width:  100,
    height:  50
  };

4. 设置stage()函数，该函数更新盒子的位置、清除画布、绘制盒子：

anim.setStage(function(){
  //更新
  var linearDistEachFrame  = linearSpeed  * this.
  getTimeInterval()  /  1000;
  if  (box.x  < canvas.width  - box.width)  {
    box.x  += linearDistEachFrame;
  }
  else  {
    anim.stop();
  }
  //清除
  this.clear();
  //绘制
  context.beginPath();
  context.fillStyle  = "blue";
  context.fillRect(box.x, box.y, box.width, box.height);
});

5. 启动动画：

  anim.start();
};

</script>
</head>

6. 在HTML文档的body部分嵌入canvas标签：

<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>

工作原理

要创建一个简单的直线运动的动画，我们首先需要实例化一个Animation对象，并得到画布及其上下文对象。其次，我们可以定义盒子的速度，本节我们设置为100像素/秒，并创建盒子对象，包含盒子的位置和尺寸。

现在，盒子已经初始化完成，我们可以定义stage()函数，该函数在动画循环中被调用。在每次循环中，首先计算上一帧和当前帧之间的距离，再把这个距离加到x值上，来更新盒子的位置。当盒子到达画布边缘，我们可以调用stop()函数来停止动画。

最后，当stage()函数定义完成，我们就可以调用start()方法启动动画了。

5.2 创建直线运动

操作步骤

工作原理

相关参考