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如在呼叫进行动画指定的属性的起始值和结束值,并且它设置属性值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 - 足够好!