5.4 创建振荡运动

优质

小牛编辑

127浏览

2023-12-01

本节，我们将探讨第三大类型的运动——振荡运动。弹簧上悬挂的重物，振荡的气泡，来回摆动的摆钟，都是振荡运动的例子。

操作步骤

按照以下步骤，让盒子来回摆动：

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 box  =  {
  x:  250,
  y: canvas.height  /  2  -  25, 
  width:  100,
  height:  50
  };

4. 定义简谐振动方程所需要的参数：

  var centerX  = canvas.width  /  2  - box.width  /  2;
  var amplitude  =  150;  // pixels
  var period  =  2000;  // ms

5. 设置stage()函数，该函数根据简谐振动方程来更新盒子的位置，清除画布，再绘制盒子：

  anim.setStage(function(){ //更新
  box.x  = amplitude  * Math.sin(anim.getTime()  *  2  * Math.PI / period)  + centerX;
  //清除
  this.clear();
  //绘制
  context.beginPath();
  context.rect(box.x, box.y, box.width, box.height); 
  context.fillStyle  = "blue";
  context.fill();
  });

6. 启动动画：

  anim.start();
  };
</script>
</head>

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

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

工作原理

页面加载完成后，我们可以实例化一个Animation对象，并获取画布及上下文对象。

其次，我们可以创建一个box对象，该对象定义了盒子的位置和尺寸，然后定义简谐振动方程所需要的变量：

x(t) = A * sin (t * 2π / T + Φ) + x0

本节的例子中，我们把振幅A设置为150，周期T设置为2秒，偏移x0和相位差Φ设置为和0。

对每一个动画帧，我们利用简谐振动方程来更新盒子的位置，清除画布，再使用rect()方法绘制盒子。

最后，我们可以调用start()方法来启动动画。

5.4 创建振荡运动

操作步骤

工作原理

相关参考