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

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

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

https://friable.rocks/_/2009_11_05/124506e8a53a.jpg

从这个坐标系可以获得更多的信息,比如动画运行的时间段(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/帧率中文

--未完待续--