Javascript 动画初探（原理）

哲学上有种说法，“运动是绝对的，静止是相对的”。我们在编写各样的效果时，时常会碰到动画。下面的章，将讨论动画的原理以及实现。

动画，简而言之就是物体在某时间段内，不断的改变自身的属性。这些属性有可能是位置、大小等。为了方便说明，在这里统一认定为位置（position）。

那么，动画就有了两个基本的变量，时间和位置。用直角坐标系来表示，将 x 轴定为时间（time），将 y 轴定为位置（position），就可以得到这样的坐标系

从这个坐标系可以获得更多的信息，比如动画运行的时间段（x 轴的区间）、动画开始试物体的位置（begin）以及结束时的位置（final）。

然后，动画的基本关系可初步抽象出来。时间（duration）和位置（position）存在函数关系

position = f(time)

在这里同时引入 fps （帧率）这个概念。fps 简单的说，就是一秒钟内物体变化了几帧。它抽象成坐标中的元素，就是 x 轴的粒度。

fps 是个常量（比如通常电影的 fps 为 25，即每秒 25 帧），通过 fps 以及时间段（duration），则可以计算出这个时间段内物体位移了几帧（frames），公式如下

frames = (duration/1000)*fps

上述公式中，时间段（duration）以毫秒计算，即一毫秒等于一千分之一秒。

综合起来，我们要获得某个时间点的位置时，就可以利用 当前时间点（time）、时间段（duration、x 轴的区间），以及开始的坐标（begin）和结束的坐标（final）等因素来完成，那么可以将第一个的公式细化成

position = f(time, begin, final, duration)

同时，根据 fps 计算出的帧数，则可以得知某动画在这个时间段内运行了几次。而此函数产生的曲线，则可以说明在指定时间段内，物体的运动情况。如曲线比较抖，则说明物体运动比较快，反之则慢。

例如上述函数图的 45 度曲线，如果不考虑区间因素则可以写成

position = time

然后加上函数区间，则用函数表示

postion = final * time / duration + begin

那么就可以说明物体随着时间的改变，位置进行匀速递增的运行。

至此，元素的动画问题，这时就可以抽象成具体的数学问题。仅通过改变函数的公式，就可以改变物体动画的运行效果。

附，相关参考资源：

* ：动画（中文）、FPS/帧率（中文）

继续阅读：Javascript 动画初探（实现）