5.3 创建加速度
现在，我们已经掌握了动画的基础知识，让我们绘制一个在重力作用下向下加速运动的盒子，来尝试稍微复杂一点的动画。
操作步骤
按照以下步骤，在画布的顶部绘制一个盒子，该盒子在重力作用下向下加速运动：
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. 定义重力，并创建一个包含位置、x和y速度、及尺寸的box对象：
var gravity = 2; // pixels / second^2
var box = {
x: canvas.width / 2 - 50, y: 0,
vx: 0,
vy: 0,
width: 100,
height: 50
};4. 设置 stage()函数，该函数更新盒子、清除画布、绘制盒子：
anim.setStage(function(){
//更新
if (this.getTime() > 1000) {
var speedIncrementEachFrame = gravity * anim.
getTimeInterval() / 1000; // pixels / second
box.vy += speedIncrementEachFrame;
box.y += box.vy * this.getTimeInterval();
if (box.y > canvas.height - box.height) {
box.y = canvas.height - box.height;
this.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>工作原理
要创建具有加速度的动画，我们可以增加盒子的速度，用新的速度来更新盒子的位置，清除画布，再绘制盒子。
通过给速度加上由重力产生的速度变化（其值为2像素/秒^2），我们可以计算出每一帧，盒子在y轴方向上的新速度：
var speedIncrementEachFrame = gravity * anim.getTimeInterval() / 1000; // pixels / second
box.vy += speedIncrementEachFrame;
其次，通过增加自上一帧以来移动的距离，可以计算盒子在y轴的新位置：
box.y += box.vy * this.getTimeInterval();
换句话说，y轴位置的变化，等于盒子的速度乘以时间间隔。
最后，我们增加一个条件来检查盒子是否到达画布的底部，如果到达底部，则调用stop()方法停止动画。
在向物体或粒子施力时，加速度就非常有用。施力的例子有重力，空气阻力，阻尼，地面摩擦力和电磁力。对于特别精确的加速动画，还需要很多物理知识，你可能会考虑找一个开源的矢量库，来帮助处理在x方向和y方向上的速度和加速度。
相关参考
- 第2章 绘制矩形