第10步《前端篇》第3章完成交互功能第7课

今天学习《前端篇》第3章完成交互功能的第7课，实现动画，让小球动起来。

学习目标

• 使用定时器实现动画；
• 了解JS语言的异步执行执行；
• 学习13种复合赋值运算符；
• 通过边界检查实现碰撞检测；
• 使用requestAnimationFrame实现动画。

主要知识点/技能点

• 所谓动画，就是视图内容不停地擦除与重绘。
• JS 有两个定时器方法 setInterval 和 setTimeout，其中setInterval 以指定毫秒数为间隔，不停地执行回调函数；setTimeout 在暂停指定毫秒数后，执行回调函数，且仅执行一次。
• JS 是单线程，同一时间只能执行一个任务，同步任务在主线程中会依次执行。在主线程上发起的异步操作，会交给另外一个看不见的异步线程执行和管理，不会阻塞主线程的执行。当主线程空闲的时候（例如每个帧渲染周期的空隙），它会去异步线程那里询问，有没有可被执行的异步代码。如果某个异步操作（例如 Ajax 网络请求的回调函数，或者某个定时器的回调函数）可以执行了，便会被放到主线程队列中排队执行。
• 定时器是一种异步任务。在浏览器宿主环境中有一个独立的定时器模块，定时器的延迟时间是由定时器模块管理的，如果某个定时器时间到了，它的回调函数就会被加入主线程队列中。
• JS 有 13 种复合赋值运算符，复合赋值运算符等于先运算，再以运算结果赋值。具体运算符号略。
• 在 Canvas API中，clearRect 方法可以清空画布上给定矩形区域内的像素。
• 在 HTML5 页面开发中，浏览器提供了一个 requestAnimationFrame 函数，这个函数可以要求宿主环境在下一次重绘视图之前执行某个回调函数，它对改善动画卡顿有明显效果。

实践疑难点

• 不能及时清屏，会造成画面的累加。
• 每次小球在碰到边界时，有半个球几乎都会陷入墙壁中。这是由于碰撞检测的坐标是以小球的圆心为准的，如果以圆弧边界进行检测，或者将画布的四周边界值都减少一个小球半径的宽度，问题便能解决。

小结

动画就是不断的擦除与重绘，基于requestAnimationFrame函数在桢频更新的间隙实现重绘，是HTML5与小游戏画布绘制保证界面不卡顿的秘诀。