jQuery缓动函数 - 变量理解

Question

jQuery中的缓动函数是如何工作的？以以下代码为例：

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

这是如何工作的？每个参数都代表什么？如果我要实现动画缓和效果，应该怎么做？

另外，如果我想将缓动模式附加到jQuery上，把它加载到$.easing中是否足够？

- qwertymk

---

不是一个确切的答案，但是Robert Penner的缓动网站是一个非常棒的资源。特别是阅读他的书中的那一章《Good stuff》。 - sdleihssirhc

Answer 1

根据jQuery 1.6.2源码，缓动函数的含义如下。在动画的不同时间点调用该函数。在被调用的瞬间，

• x和t都表示当前时间相对于动画开始时间的时间。x表示为[0,1]范围内的浮点数，其中0是开始，1是结束。t以毫秒为单位表示自动画开始以来的时间。
• d是动画的持续时间，以毫秒为单位，在animate调用中指定。
• b=0且c=1。

据我所见，jQuery并没有直接控制动画步骤函数被调用的时间，它只让您说“如果在时间t调用我，则我应该完成整个动画的这一部分”。因此，您不能要求在物体移动更快的时候更频繁地重新绘制它。另外，我不知道为什么其他人说b是起始值，c是变化量 - 这不是jQuery源代码所说的。

如果您想定义自己的缓动函数以执行与easeInQuad相同的操作，例如：

$.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }})

$('#marker').animate({left:'800px'},'slow','myfunc');

$.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }})

$('#marker').animate({left:'500px'},'slow','myfunc');

#marker { position: absolute; left: 10px; top: 50px; background: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='marker'>Hello World!</div>

- DamonJW

---

谢谢！这帮了我很多忙。 - polarblau

@DamonJW 动画步进函数是 jQuery.fx.interval，你可以在这里找到它 http://api.jquery.com/jQuery.fx.interval/ - jedmao

如果这有助于其他人理解，x基本上是动画完成的％。 x = t / d（百分比完成等于经过的时间除以持续时间）。 - IMTheNachoMan

Answer 2

一个具体的例子，

假设我们的初始值为 1000 ，我们想在 3 秒 内达到 400 ：

var initialValue = 1000,
    destinationValue = 400,
    amountOfChange = destinationValue - initialValue, // = -600
    duration = 3,
    elapsed;

从0秒到3秒，让我们开始：

elapsed = 0
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 1000

elapsed = 1
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 933.3333333333334

elapsed = 2
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 733.3333333333334

elapsed = 3
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 400

相比简介：

$.easing.easeInQuad = function (x, t, b, c, d) {...}

我们可以推断出：

 x       t          b              c            d
 |       |          |              |            |
null  elapsed  initialValue  amountOfChange  duration

---

NB1: 一个非常重要的事情是，elapsed(t)和duration(d)应该以相同的单位表达，例如：这里我们使用“秒”，但也可以使用“毫秒”或其他单位。这同样适用于initialValue(b)和amountOfChange(c)，因此总结一下：

 x       t          b              c            d
 |       |          |              |            |
null  elapsed  initialValue  amountOfChange  duration
         ^          ^              ^            ^
         +----------|----=unit=----|------------+
                    +----=unit=----+

NB2: 像@DamonJW一样，我不知道为什么这里有x。它在Penner's equations中没有出现，并且在结果中似乎没有被使用：所以我们总是将其设置为null

- abernier

---

谢谢，这个例子真的让我更清楚地了解了缓动函数的工作原理。 - alphablender

但我认为这个持续时间是以毫秒而不是以秒为单位的。 - R3tep

Answer 3

t：当前时间，b：起始值，c：从起始值到结束值的变化量，d：持续时间。

它是如何工作的：http://james.padolsey.com/demos/jquery/easing/（表示CSS属性更改时的曲线）。

这是我如何实现一些愚蠢的缓动效果：http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm（数学不是我的强项）。

您可以像这样扩展：http://code.google.com/p/vanitytools/source/browse/trunk/website/js/custom_easing.js?spec=svn29&r=29 - 已经足够好了！

- two7s_clash

---

而x参数是什么？ 你链接的custom_easing.js示例中没有一个使用x。 - DamonJW

@Damon：嗯，好问题。但是如果你看一下要求解释的例子，x甚至没有在那个函数中使用。传入但未使用。这是一个不需要用于方程式的额外参数，但对于与jQuery兼容性而言是必要的。 - two7s_clash

我在我的回答的结尾添加了一些细节。 - abernier

Answer 4

这个插件实现了最常见的缓动函数：http://gsgd.co.uk/sandbox/jquery/easing/

- gblazex

---

是的，源代码中有一个引用它的注释：https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.effects.core.js#L568 - abernier

Answer 5

查看了1.11版本的jQuery代码。x参数似乎表示“百分比”，与初始时间值无关。 因此，x始终为（0 <= x <= 1）（表示抽象系数），而t为x * d（表示经过的时间）。

- Kirill Kharchenko