jQuery缓动函数 - 变量的理解

Question

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

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

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

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

Answer 1

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

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

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

据我所知，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');

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 ）应该以相同的单位表示，例如：这里的'秒'对我们而言，但可能是'ms'或其他什么。 对于initialValue （ b ）和amountOfChange （ c ）也是如此，所以总结一下：

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

NB2：就像@DamonJW一样，我不知道为什么x在这里。 它没有出现在Penner方程中 ，似乎没有在结果中使用：让我们总是将它设置为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？specs = snn29＆r = 29 - 足够好！

Answer 4

查看了1.11 jquery代码。 x参数似乎意味着'百分比'，与初始时间值无关。 因此，x总是（0 <= x <= 1）（表示抽象系数），t是x * d（表示经过的时间）。

Answer 5

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