html5加速度源码,5.3 创建加速度 - HTML5 Canvas 实战

现在，我们已经掌握了动画的基础知识，让我们绘制一个在重力作用下向下加速运动的盒子，来尝试稍微复杂一点的动画。

图5-3 创建加速运动

操作步骤

按照以下步骤，在画布的顶部绘制一个盒子，该盒子在重力作用下向下加速运动：

1. 链接到Animation类：

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

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();

};

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

工作原理

要创建具有加速度的动画，我们可以增加盒子的速度，用新的速度来更新盒子的位置，清除画布，再绘制盒子。

通过给速度加上由重力产生的速度变化(其值为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章 绘制矩形