Jquery 什么是缓和功能？

在动画环境中，放松功能的含义是什么。似乎dojo、jquery、silverlight、flex和其他UI系统都有简化功能的概念。我找不到一个关于放松功能的好解释？有人能解释一下放松功能的概念吗？或者说，我感兴趣的是放松功能的概念，而不是框架的具体细节

---

是严格用于定位，还是通用且可应用于对象的任何属性

缓和功能是一种算法，用于控制动画的速度以提供所需的效果（反弹、放大和减速等）

查看更多细节。它是从一种状态到另一种状态的属性（大小、形状、位置）转换

下面是一些简洁的小图，描述了jQueryUI提供的缓解功能

---

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

首先让我们看看我们所有的放松功能都将遵循的界面

我们的缓和函数将包含几个参数：

• 完成百分比：（

  0.0

  至

  1.0

  ）
• elapsedTime：动画已运行的毫秒数
• 起始值：起始值（或完成百分比为0%时的值）
• endValue：结束时的值（或完成百分比为100%时的值）
• totalDuration：动画所需的总长度（以毫秒为单位）

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

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

最容易理解的是线性易用性：

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

这是一个非常直截了当（没有双关语的意思）的二人组。这是一个简单的线性插值。如果要绘制值与时间的关系图，它将是一条直线：

让我们看一看更复杂的缓和函数，二次缓和：

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

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;
},

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

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，这是我们指定的

开始

和

结束

值之间实际距离的四分之一

如果我们要绘制这个函数，它会像这样：

现在，让我们看一看基本的缓解措施：

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;
};

var easeInOutQuad=函数（x，t，b，c，d）{
如果（（t/=d/2）<1）返回c/2*t*t+b；
返回-c/2*（（-t）*（t-2）-1）+b；
};

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

您可以使用一系列缓和/插值：线性、四半径、立方、四次、五次、正弦。还有一些特殊的放松功能，比如反弹和弹性，它们有自己的特点

例如，弹性放松：

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

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，t，b，c，d）{ var s=1.70158；var p=0；var a=c； if（t==0）返回b；if（（t/=d）==1）返回b+c；if（！p）p=d*.3； 如果（a

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

启动tween/动画时，动画引擎会记住所需的开始值和结束值。然后每次更新时，它都会计算出经过了多少时间。它使用值调用提供的函数，以确定属性应设置为的值。只要所有的easing函数实现相同的签名，就可以轻松地将它们替换掉，核心动画引擎不必知道它们的区别。（这使得关注点能够很好地分离）

您会注意到，我避免明确谈论

x

和

y

位置，因为宽松与位置本身没有任何具体关系。缓和函数仅定义开始值和结束值之间的转换。这些可以是

x

坐标、颜色或对象的透明度

实际上，在理论上，你可以应用不同的缓和函数来插值不同的属性。希望这有助于阐明基本思想

这里有一个真正的（使用稍微不同的签名，但是相同的原则）游戏，以了解宽松与头寸的关系

---

编辑

这里有一点我放在一起演示javascript中的一些基本用法。请注意，

top

属性使用bounce变为tweened，而

left

属性使用quad变为tweened。使用滑块模拟渲染循环

由于

对象中的所有函数都具有相同的签名，因此可以将它们中的任何一个相互交换。现在这些东西大部分都是硬编码的（thi