javascript动画、运动算法详细解释与分析 （三、Tween 运动算法：二次方曲线算法）

在 javascript动画、运动算法详细解释与分析 （一、Tween 运动算法） 中我们简单介绍了一下线性动画在javascript中的实现，你可能会像刚开始的我一样感觉这个动画直白，生硬，不自然，没有任何趣味性。而我们现实生活中也不会存在这样的匀速，直线，从0px移动到300px的灰色箱子。。但想象一下，如果我们的箱子会缓动，会弹跳，会变形，那就会有意思的多。

现实生活中，物体的运动都存在加速度或者缓冲，物体不可能从一个速度突然蹦到另外一个速度。如果我们用符合自然现实的方式实现我们的动画，那么我们的动画看起来才会更加自然、生动、流畅。那么现在，我们就来看一下“缓动”。

缓入缓出曲线：

缓入：起始速度很慢，然后开始加速度。运动曲线（此时，斜率从0开始，并逐渐向1靠近）

缓出：起始速度很快，然后减速，直到速度为0。运动曲线（斜率从1开始，逐渐向0靠近）

缓入缓出：这个运动演示了物体运动从开始到结束的全过程（斜率从0到1，再从1到0）

下面我们具体的看一下各种缓动曲线及公式：

缓动类型：二次缓动

曲线类型：实际上就是二次方曲线（抛物线），p(t) = t ^ 2

曲线图示：

动画函数：

javascript实例：

虽然我们不是搞数学的，不过这里还是有必要解释一下这个公式，这里和我们之前的直线算法(p = t/d*c+b)一样，也是以t为变量，求p，只不过这里计算的是变量的平方。直线算法中，t*c/d+b表示当前事件量乘以不变的速度（c/d）再加上起始位置。但缓入算法中因为每时间片内的速度不一致，所以不能直接用c/d，既然是二次方抛物线，可能有同学就会想，那我直接写成p = t * t /d * c + b不就行了么，恩，你猜对了，这确实是一个二次方抛物线，不过，如果你尝试一下，你就会发现，这个抛物线会直接把物体抛到一个非常神秘非常遥远的地方。实际上我们这里的抛物线是有限制的，什么限制呢，0