【转】Javascript中动画效果的实现原理

    我们在看到物体的运动的时候，大脑会不由自主的分析其受力情况，会考虑它为什么会动，以及它何时会停下来。我们这里说的缓动也就是运动过程中速度受加速度影响的过程，这个加速度可能是正的或者是负的，其正负的不同会体现在运动是加速运动还是减速运动，也就是是缓入还是缓出。

    我们再分析一下我们的例子，看看它在正常的基本符合实际情况下它是如何运动的。假设红色的方块是冰面上的一个箱子，我们现在要让箱子运动起来。红色 的方块开始的时候肯定是静止在那不动的，它要动起来我们就必须推它一把，然后它就开始运动了，这里我们再把情况简化一下，冰面的摩擦力很小，所以我们假设 摩擦力足够小，小到可以忽略，而且我们推动它的力是一个恒定不变的力，这就是一个匀加速直线运动。

根据我们学过的匀加速运动物理公式：
s = v0t + (1/2)a*t*t（这里在页面中，上标和下标的现实确实不方便，大家凑合着看吧:P）
根据这个公式我们可以计算出我们动画过程中运动物体当前的位置。

当前时间为t，路程的改变值为c，持续的时间为d，初始位置为b，根据我们刚才分析的情况，初始位置和初始速度都为0，将我们的变量带入到公式中得到：
c = (1/2)a*d*d=>a=2c/(d*d)
从而得到我们当前的位置p为：
p=((1/2)*2c/(d*d)*(t*t)+b=c*t*t/(d*d)
将我们获得的式子利用程序的特性进一步简化：
p=c*(t/=d)*t

    不知道你看明白了吗？我们现在将一个匀加速直线运动的方程式转换成我们在做动画时用到的是根据时间获取位置的公式。其实很简单，就是将现成的的公式简单的 转换一下，变得我们程序中可以用，这是匀加速直线运动，也就是缓入，匀减速直线运动也就是缓出也是同样的道理这里就不推导了。

原文地址：http://www.dklogs.net/?p=310