jQuery 缓动函数——变量的理解

Question

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

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

它是如何工作的？每个参数代表什么？我将如何为动画实现一些愚蠢的缓动？

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

Answer 1

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

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

缓动函数应返回 [0,1] 范围内的浮点数，称为 `r`。然后 jQuery 计算 `x=start+r*(end-start)`，其中 `start` 和 `end` 是调用 animate 时指定的属性的开始和结束值，并将属性值设置为 ` x`。

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

如果你想定义自己的缓动函数来做同样的事情，例如，

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

Answer 2

一个具体的例子，

假设我们的初始值为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 在这里。它没有出现在Penner's equations 中，并且在结果中出现not seem to be used：让始终将他设置为null

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

Answer 4

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

Answer 5

浏览了 1.11 的 jquery 代码。 x 参数似乎意味着“百分比”，与初始时间值无关。 所以，x 总是 (0