Javascript动画（二）：动起来了的小球

从Javascript动画（一）了解了requestAnimationFrame函数，这一节我们使用这个函数来实现一个简单的动画。

第一步：画静止不动的小球

html

<div id="container">
	<canvas id="canvas"></canvas>
</div>

css

body{
    text-align: center;
}
#container{
    margin-top: 30px;
    display: inline-block;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 #999;
    padding: 20px;
}
canvas{
    background-color: #fff;
    border: 1px solid #000;
}

javascript

var cvs = document.getElementById('canvas'),    // 获取画布元素
    ctx = cvs.getContext('2d');                 // 获取画面上下文对象，用于画图
cvs.width = 800;        // 设置画布宽度
cvs.height = 600;       // 设置画布高度

// 小球相关属性
var ball = {
  x: 50,    // x坐标
  y: 50,    // y坐标
  r: 30,    // 小球半径
  color: 'blue',    // 小球填充颜色
  vx: 1,            // 小球x轴速度  px/帧
  vy: 1             // 小球y轴速度  px/帧
};

/**
 * 将小球画到画布上显示出来
 */
function draw() {
  ctx.fillStyle = ball.color;
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2, false);
  ctx.closePath();
  ctx.fill();
}

// 调用画图函数
draw();

这样就将静止的小球给画出来了

第二步：让小球动起来

引入Javascript动画（一）写的requestAnimationFrame的polyfill文件

<script src="../requestAnimationFrame-polyfill.js"></script>

小球动起来，就是要在每一帧的时候更改小球的位置，编写如下update函数

/**
 * 更新小球位置，基于帧速率
 * @param dt 此帧离上帧间隔时间
 */
function update(dt) {
  ball.x += ball.vx;
  ball.y += ball.vy;
  if (ball.x - ball.r <= 0 ) {                  // 小球碰到了左边
    ball.x = ball.r;
    ball.vx *= -1;
  } else if (ball.x + ball.r >= cvs.width) {    // 小球碰到了右边
    ball.x = cvs.width - ball.r;
    ball.vx *= -1;
  }
  if (ball.y - ball.r <= 0 ) {                  // 小球碰到了上边
    ball.y = ball.r;
    ball.vy *= -1;
  } else if (ball.y + ball.r >= cvs.height) {    // 小球碰到了下边
    ball.y = cvs.height - ball.r;
    ball.vy *= -1;
  }
}

编写动画循环函数

// 调用画图函数
// draw();	// 已放到动画循环函数内

var lasttime = undefined;
function animate(time) {
  if (lasttime === undefined) {
    lasttime = time;
  } else {
    var dt = time - lasttime;
    lasttime = time;
    update(dt);                 // 更新小球位置
    draw();                     // 更新后，将小球画出来
  }
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate); // 调用requestAnimationFrame，使浏览器在最佳时机执行回调函数

运行程序几秒后

怎么会是这样的呢？ canvas在每次作画时，并不会自动清除上次的绘画结果，所以要看到单个小球的话，需使用clearRect函数主动清除上次的绘画结果。
修改draw函数：

function draw() {
  ctx.clearRect(0, 0, cvs.width, cvs.height);		// 添加此行代码
  // 其它代码不改动
}

此次就不上图了，自己运行看下吧~ 0.0