jquery - 什么是缓动函数？

Question

动画上下文中的缓动函数是什么意思。似乎dojo、jquery、silverlight、flex等UI系统都有缓动功能的概念。我找不到缓动函数的一个很好的解释？任何人都可以解释缓动函数的概念，或者对它们进行很好的解释，我对这个概念感兴趣而不是框架的具体细节？

缓动是严格用于位置还是通用并且可以应用于对象的任何属性？

Answer 1

缓动函数通常是描述给定完整性百分比的属性值的函数。不同的框架使用略有不同的变体，但是一旦你有了这个想法，这个概念就很容易掌握，但最好看几个例子。

首先让我们看一下我们所有缓动函数都将遵循的接口(interface)。

我们的缓动函数将采用几个参数:

百分比完成:( 0.0 到 1.0 )。

elapsedTime:动画已经运行的毫秒数

startValue:起始值(或完成百分比为 0% 时的值)

endValue:结束的值(或完成百分比为 100% 时的值)

totalDuration:以毫秒为单位的动画所需的总长度

并将返回一个数字，该数字表示该属性应设置为的值。

注意:这与 jQuery 用于其缓动函数的签名相同，我将借用它作为示例。

最容易理解的是线性缓动:

var linear = function(percent,elapsed,start,end,total) {
    return start+(end-start)*percent;
}

现在要使用它:

假设我们有一个动画将持续 1000 毫秒，并且应该从 0 开始并在 50 结束。将这些值传递给我们的缓动函数应该告诉我们实际值应该是什么:

linear(0, 0, 0,50, 1000)        // 0
linear(0.25, 250, 0, 50, 1000)  // 12.5
linear(0.5, 500, 0, 50, 1000)   // 25
linear(0.75, 750, 0, 50, 1000)  // 37.5
linear(1.0, 1000, 0, 50, 1000)  // 50

这是一个非常直接的(没有双关语意)补间。这是一个简单的线性插值。如果您要绘制值(value)与时间的关系图，它将是一条直线:



让我们来看看更复杂的缓动函数，二次缓动:

var easeInQuad = function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
}

让我们看看相同的结果，使用与之前相同的输入:

easeInQuad(0, 0, 0, 50, 1000)      // 0
easeInQuad(0.25, 250, 0, 50, 1000) // 3.125
easeInQuad(0.5, 500, 0, 50, 1000)  // 12.5
easeInQuad(0.75, 750, 0, 50, 1000) // 28.125
easeInQuad(1, 1000, 0, 50, 1000)   // 50

请注意，这些值与我们的线性缓动非常不同。它开始非常缓慢，然后加速到终点。在动画完成 50% 时，它只达到了 12.5 的值，这是 start 之间实际距离的四分之一。和 end我们指定的值。

如果我们要绘制这个函数，它看起来像这样:



现在让我们看一下基本的缓出:

var easeOutQuad = function (x, t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
};

这本质上是执行缓入的“相反”加速曲线。它开始快速，然后减速到其结束值:



然后有一些功能可以轻松进出:

var easeInOutQuad = function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
};

此函数将开始缓慢结束，在中间达到其最大速度。

您可以使用许多缓动/插值:线性、二次、三次、四分、五分、正弦。还有一些特殊的缓动功能，比如 Bounce 和 elastic，它们都有自己的功能。

例如，弹性缓和:

var easeInElastic = function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},

也许其他人可以解释插值背后的实际数学部分，因为老实说我不是数学奇才。但这是缓动函数本身的基本原则。

当您开始补间/动画时，动画引擎会记住您想要的开始和结束值。然后每次更新时，它都会计算出已经过去了多少时间。它使用值调用提供的缓动函数来确定属性应该设置的值。只要所有缓动函数都实现相同的签名，它们就可以轻松换出，核心动画引擎不必知道区别。 (这可以很好地分离关注点)。

你会注意到我避免谈论 x和 y明确定位，因为缓动本身与定位没有任何特别的关系。缓动函数仅定义开始值和结束值之间的转换。那些可能是 x坐标、颜色或对象的透明度。

事实上，理论上，您可以应用不同的缓动函数来对不同的属性进行插值。希望这有助于阐明基本思想。

这是一个真正的 cool example (使用稍微不同的签名，但原理相同)来了解缓动与位置的关系。

编辑

这里有一点jsFiddle我拼凑起来演示了 javascript 中的一些基本用法。请注意 top属性使用反弹补间，left属性使用四边形进行补间。使用滑块模拟渲染循环。

由于easing中的所有功能对象具有相同的签名，您可以将它们中的任何一个相互交换。现在大多数这些东西都是硬编码的(比如开始和结束值、使用的补间函数和动画的长度)，但是在动画助手的真实示例中，您可能希望通过在以下属性中:

要更改的属性

起始值(或者如果离开 undefined 则使用其当前值)

结束值

动画的长度应该是

对您要使用的补间函数的引用。

动画引擎会在动画持续时间内跟踪这些设置，并且在每个更新周期内，它会使用补间参数来计算属性的新值。