本节书摘来自异步社区《HTML5+JavaScript动画基础》一书中的第1章，第1.1节，作者：【美】Billy Lamberta , Keith Peters著，更多章节内容可以访问云栖社区“异步社区”公众号查看
第一部分 JavaScript动画基础
第1章 动画的基本概念
看看Web浏览器已经发展到何种程度！最初Web浏览器仅仅是一个用于在网络上访问文本文件的程序，很快它就彻底改变了我们沟通与分享信息的方式，现在它已经演变成一个完全图形化的交互式编程环境。HTML5作为网页标记语言的最新标准加入了大量原本只存在于本地应用中的图形功能。经过短暂的停滞，得益于HTML5和JavaScript技术引发的新一轮的竞争与创新，现在的Web浏览器发展迅速。新的canvas元素提供了一种创建标准化的游戏、应用与动画的方式，使用这种方式创造出来的产物可以正常地运行在最新的Web浏览器以及移动设备上，包括各种流行的移动电话与平板电脑，例如，iPhone、iPad与安卓设备。
本书将介绍借助JavaScript在HTML5 canvas元素中实现动画所需的各种编程、数学与物理技术。你将会看到开发人员在这些技术的支持下，首次在遵循标准的Web浏览器上获得了更强的开发能力、控制能力以及优良的交互性。
在我们深入使用JavaScript实现动画的具体技术和公式之前，让我们首先了解什么是动画，其背后的一些基本原理以及一些可以使动画变得更加动态、更加有趣的概念。
无论你是否第一次接触电脑动画还是你之前有使用Adode Flash实现动画的经历，本书都会对实现编程动画起到很大的指导作用。本书在从Flash版本移植到JavaScript版本的过程中经历了大量的修改，不过它的成功也验证了底层的技术和数学概念是与语言无关的。本书的动画虽然是针对Web浏览器实现的，不过在适度的图像功能支持下，书中的公式与示例可以应用于任何开发环境。
如果你等不及开始编码，你完全可以跳过本章的内容。不过，强烈建议你在某一时刻翻回本章。通过下面的介绍，你应该会对动画的工作原理产生一些基本的了解。
1.1 动画
动画是运动。运动是一个物体随着时间在空间中改变它的位置，前一分钟它在这里，下一分钟它到了那里。将数学公式应用于改变一个物体的位置后，你就可以决定它的下一个位置并影响运动的行为，也就赋予了物体生命。
但是动画并不仅仅就是运动，它还包括对任意可视属性的变化，如形状、大小、方向与颜色等。一些早期的电脑动画通过循环变换颜色模拟运动。例如，以某种频率改变大量形状不一的蓝色像素的色调就可以模拟水的流动，从而创造出一个瀑布，而在此过程中没有一个物体的位置发生了变化。
时间是动画的基本组成部分。它是用于表现对象位置变化的途径。没有时间就没有运动，动画也就变成了静止的图像。同理，没有运动，我们也无法感知时间的存在，即使是现在正在发生的事情，例如，一段来自空停车场的监控视频。没有物体的运动，你无法确认你是在观看一个实时的视频，或是5秒钟前的一个画面，亦或是一幅没有变化的静止图像。只有当一个塑料袋被风吹过屏幕，你才能确定时间的存在以及可能发生进一步的变化。没有时间，图像中就不会发生任何事情。
这引入了另一个话题，动画可以让人保持注意力。如果有变化，人们的大脑自然会感到好奇。什么变化了？为什么它会变化？我让它变得吗？这种变化符合我对这个物体的心理预期吗或者我应该调整我的假设？现在的媒体（例如，音乐和电影）之所以能够引人注目是因为，在现实生活中，我们无法确认下一步会发生什么。我们可能有一个大概的想法，而在此基础上的所作的模式推理则会让人感到有趣，而我们之所以能够从中体会到快乐恰恰是因为我们游走在不确定的边缘。传统的媒体则是一成不变的，如相片、绘画和文本，我们会探索它们的细节，我们对它们的理解和解读可能随着时间而变化，但是它们本身却永远不变。这就是动画引人注目的原因。媒体总是包含了变化，这些变化把握住了我们天生就习惯于的一些常识。因此，人们很容易就在一部电影中沉浸了几个小时或者被一款视频游戏迷住几天。如果有什么事情要发生，人们总是想要知道那会是什么。
