媒介
本文虽说是基本教程，但这是相对动画/游戏范畴来讲，在前端范畴算是中级教程了，不适合前端小白或萌新。浏览前请确保本身对前端三大件（JavaScript+CSS+HTML）的基本已非常熟习，而且有高中程度的数学和物理学问。demo采纳ES6编写，遵照Airbnb范例，不依赖第三方框架或库，请在当代浏览器里运转。
大部份例子来自《Foundation HTML5 Animation with JavaScript》，谢谢这本书作者的辛勤和启示。本教程也能够算是该书的精(tian)简(you)优(jia)化(cu)版，既是我的个人读书笔记，也是经验总结，轻易没空看书的忙人浏览。
本人才能有限，迎接牛人合营议论，批评指正。
作甚动画/游戏
【科普】动画是指由很多帧静止的画面，以肯定的速度（如每秒16张）一连播放时，肉眼因视觉残象发生错觉，而误以为画面活动的作品。为了获得活动的画面，每一个画面之间都邑有纤细的转变。而画面的制造体式格局，最罕见的是手绘在纸张或赛璐珞片上，别的的体式格局还包含了应用粘土、模子、纸偶、沙画等。
运用H5手艺完成动画道理跟传统动画是一样的，都是应用“视觉暂留”征象，盘算机经由历程肯定的划定规矩运算获得一个画面（像素数据），然后以肯定速度一连播放就构成动画。但也有些许差别，传统动画的重点是绘画技法的表现，也就是每张图画得美丽，而盘算灵活画更体贴的是怎样建立运算划定规矩，这也是数学和物理学问的应用。
在盘算机范畴，动画和游戏界线并不显著，他们的差别就是是不是有交互性，假如玩家有肯定的转变动画的操纵，再加上一些游戏划定规矩，那便可以够称得上是游戏了。
【PS】趁便一提，常有疑问为何电脑玩游戏卡，看影戏不卡呢？
因为所谓的数字版影戏，不论是三维动画照样二维动画，都是已衬着好的画面，也就是数据是一帧帧的图片，而盘算机只须要按递次换图片便可以播放。但游戏的画面是及时盘算出来的，假如盘算机机能不可，也就是没法鄙人一帧完成衬着，画面天然就会卡顿。在PC和主机机能低下的年代，将部份游戏画面预衬着后放入游戏也是罕见的进步机能的做法。
H5相干手艺概述
canvas
【科普】
<canvas>是 HTML5 新增的元素，可用于经由历程运用JavaScript中的脚原本绘制图形。比方，它能够用于绘制图形，制造照片，建立动画，以至能够举行及时视频处置惩罚或衬着。
作为上世代flash的晋级替代品，简朴来讲就是浏览器供应一个画布，你的事情就是用js操纵画笔在上面画画，不停反复画画和擦除的事情，便可以够完成动画。
canvas相干文档
用户交互
交互是游戏的基础，H5上的交互不外乎鼠标、触摸和键盘这几种，实在就是DOM规范的事宜流。我们在事宜中拿到屏幕上的坐标或键盘的键位代号，实行响应的操纵。这不是本教程重点，不懂的右转HTML相干基本，这里就不细说了。
这里有些简朴例子，能够在控制台看到结果：
demo中为了轻易运用封装了这些交互要领，放在东西库utils.js里，这里以猎取鼠标事宜，触摸事宜同理为例。
utils.captureMouse = function captureMouse(element) {
const mouse = {
x: 0,
y: 0,
};
element.addEventListener('mousemove', (event) => {
let x;
let y;
if (event.pageX || event.pageY) {
x = event.pageX;
y = event.pageY;
} else {
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= element.offsetLeft;
y -= element.offsetTop;
mouse.x = x;
mouse.y = y;
}, false);
return mouse;
};动画轮回
这是盘算灵活画在代码层面的中心，简朴来讲就是一个轮回挪用（不停递归）的历程，每次轮回都是一帧画面的发生，完成体式格局大致能够归结为三类。
基于帧的动画（requestAnimationFrame）
【科普】在视频范畴，影戏、电视、数字视频等可视为随时刻一连变更的很多张画面，而帧是指每一张画面。
平常来讲1秒15帧便可以让人眼不觉察阴郁的间隔，25帧便可觉得流通，每秒钟帧数 (fps) 愈多，所显现的行动就会愈流通。W3C所发起的革新率是1秒60帧，大部份浏览器是遵照这一规范的。
requestAnimationFrame是H5到场的函数，用法类似于setTimeout，用于通知浏览器下一帧的时刻该干什么，比方一个物体每1帧要挪动若干间隔。它供应基于浏览器的优化完成，是完成H5动画的首选，一切demo都有运用。至于它优化了什么，下面会提到。
requestAnimationFrame文档链接
基于定时器的动画
在requestAnimationFrame还未涌现的时期，平常是用setTimeout和setInterval完成动画，也能够运用他们模仿requestAnimationFrame，只需把时刻间隔设为1000/60毫秒，也就是约莫16.7毫秒实行下一个轮回，固然你也能够定义本身须要的帧率，到达游戏中罕见的锁帧结果。
所谓模仿，另一层意义就是不可能雷同，我们的顺序在浏览器沙盒中运转是不晓得显卡和显现器硬件现实是不是在革新的，但浏览器是能够晓得的，所以浏览器才能够真正的晓得什么时刻屏幕会革新，更好的合营硬件事情，这也是requestAnimationFrame优于定时器的缘由。
基于此我们能够制造一个polyfill放到东西库utils.js里。
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function timeout(callback) {
return window.setTimeout(callback, 1000 / 60);
});
}特别注意：js中给定时器划定的时刻间隔仅仅示意起码的时刻，而非确实的时刻，关于过庞杂须要凌驾时刻间隔才实行完的顺序，实行时刻就会被延后。
基于时刻的动画
实在无论是requestAnimationFrame照样定时器，都不能保证以特定速度播放。也就是说庞杂的动画在机能较差的盘算机上播放，会比它设想速度慢。这个在游戏的体验上是非常不友好的，所以就有了游戏里罕见的跳帧做法。
实在就是运用实在的时刻来器量每一个物体的活动变化，而不是依托每帧的变化。将物体每帧挪动间隔，转变为物体每秒挪动间隔。
因为demo都是简朴动画，所以临时不会运用这个操纵。
盘算机中一些数学观点与规范的差别
弧度(radian)与角度(degree)
一样平常我们运用角度会比较多，应当没有人不晓得一个圆是360度吧（笑）。但盘算机中不运用角度观点而是运用弧度。学校也有说过，这里就不解说他们的关系了，只需明白一圆周是2π弧度，二者的转换用代码示意就是：
let radians = degrees * Math.PI / 180;
let degrees = radians * 180 / Math.PI;坐标系
盘算机里的坐标系也不是一样平常运用的规范坐标系，能够说是规范坐标系的倒置版本，如下图，越往右x轴值越大，越往下y轴值越大，反之亦然。
【科普】这个坐标系有肯定的历史背景，因为“大屁股”显现器里的电子枪是从左往右，从上往下扫描屏幕的。
这个坐标系还致使了另一个题目，就是角度的正负值是与规范坐标系相反的，如下图，顺时针角度才是正值，逆时针为负值。
