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'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参数似乎意味着＆＃39;百分比＆＃39;，与初始时间值无关。因此，x总是（0 <= x <= 1）（表示抽象系数），t是x * d（表示经过的时间）。

jQuery缓动函数 - 变量的理解

5 个答案: