《HTML5+JavaScript动画基础》——1.3 动态动画与静态动画

本节书摘来自异步社区《HTML5+JavaScript动画基础》一书中的第1章，第1.3节，作者：【美】Billy Lamberta , Keith Peters著，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.3　动态动画与静态动画

1.3　动态动画与静态动画

使用程序帧实现动画的一个大的优势在于它可以变成动态的，因为图像是在运行时才创建出来的。动态地创建新的图像则可以带给每一次观看独一无二的视觉体验，而不是观看一组事先排好顺序的帧，举个例子，无论你将一部电影翻来覆去看多少遍，它的结局都不会改变。如果能够根据用户提供的值计算物体的位置，例如，鼠标光标的坐标，那么动画就可以根据用户的操作做出变化从而实现与用户的交互，营造出别的媒体类型所不能达到的一种深入其境的氛围。

不过编码的动画并不一定就是交互式的。可以使用代码让一个物体从某个点穿过屏幕。每次播放动画的时候，会运行同样的代码，导致同样的运动重复发生。这就是静态动画的一个例子。每一帧，从开始到结束都是预先定义好的。跟电影相似，你观看的是一组事先排好顺序的帧，而且每一次观看的内容是不变的。

但是如果同样使用代码创建一个物体，却将其摆放在一个随机的位置，并让它以一个随机的速度和方向运动呢？此时，每次播放动画都会有不同的事情发生。再想象一下，如果在动画开始的时候，你根据当前的日期和时间创建不同的场景，比如一个冬日的早晨，一个夏日的午后，即根据动画播放的日期展现截然不同的图像又会如何？

再比如，你在动画运行的时候可以通过键盘和鼠标设定动画中的一些参数。这使得用户可以与屏幕上的物体产生交互，远远脱离静态动画。

或许动态动画中最有意思的方面，以及本书的焦点在于如何将现实世界中的数学与物理原理运用到动画中的物体上。可以让一个物体往任意方向移动，还可以给它施加一些重力，这样当它移动时，它还会不断下落。当它碰到地面的时候，它会弹起，并且弹起的高度不会超过它的起始高度。最终它落到地面并停在那里。你还可以加入一些用户交互，让用户能够用鼠标捡起该物体并用键盘移动它。当用户不断抛投该物体时，他会感到他在操作一个真实的物体。

在这种动画下，用户不再是被动接受一串顺序帧的观众，而是进入了你创造的场景。你可以建模一个遵循你自己的物理规则的世界，提供更加真实的体验，你也可以完全摆脱现实世界的约束。作为一名程序员，你可以自由发挥你的想象，只要你觉得合适。这正是创造性的编码的乐趣所在。通过把工作交给电脑使其不断更新显示的内容，你能够创建一个非常丰富的场景使观众沉浸其中，而这是人类历史上之前的种种媒体都做不到的。观众会为此停留多久？他们会一直沉浸其中，只要你始终让他们感到有兴趣。他们与之交互的越多就越容易再次回来。