jQuery 缓动函数 —变量理解

Question

jQuery 的缓动函数如何工作？举个例子：

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

这是如何运作的？每个参数包含什么？我将如何为动画实现一些愚蠢的缓动？

另外，我如何将缓动模式附加到 jQuery，将其加载到 $.easing 中是否足够好？

Answer 1

一个具体的例子，

假设我们的初始值为 1000，我们希望在 3s 内达到 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 在这里。它不会出现在彭纳方程中，并且结果中似乎没有使用：让总是将他设置为null

Answer 2

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 - 足够好！

Answer 3

该插件实现了最常见的缓动功能： http://gsgd.co.uk/sandbox/jquery /缓动/

Answer 4

浏览了1.11 jquery代码。 x 参数似乎意味着“百分比”，与初始时间值无关。
因此，x 始终为 (0 <= x <= 1)（表示抽象系数），t 为 x * d（表示经过的时间）。

Answer 5

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

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

The easing function should return a floating point number in the range [0,1], call it `r`. jQuery then computes `x=start+r*(end-start)`, where `start` and `end` are the start and end values of the property as specified in the call to animate, and it sets the property value to `x`.

据我所知，jQuery 并没有让您直接控制何时调用动画步骤函数，它只让您说“如果我在时间 t 被调用，那么我应该到目前为止已经完成了整个动画”。因此，例如，当对象移动得更快时，您不能要求更频繁地重绘对象。另外，我不知道为什么其他人说 b 是起始值，c 是变化值——这不是 jQuery 源代码所说的。

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

$.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>