jQuery缓动函数 – 变量的理解
jQuery的缓动函数如何工作？ 举个例子：
easeInQuad = function (x, t, b, c, d) { return c*(t/=d)*t + b; }; 这是如何运作的？ 每个参数有什么作用？ 我如何为动画实现一些愚蠢的缓和？
另外我如何将缓动模式附加到jQuery，将它加载到$ .easing中足够好？
根据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');
一个具体的例子，
假设我们的初始值是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) {...}
我们可以推断：
xtbcd | | | | | null elapsed initialValue amountOfChange duration
NB1：一个重要的事情是， elapsed （ t ）和duration （ d ）应该以相同的单位表示，例如：对于我们来说这里是’秒’，但可能是’ms’或者其他什么。 对于initialValue （ b ）和amountOfChange （ c ）也是如此，所以总结一下：
xtbcd | | | | | null elapsed initialValue amountOfChange duration ^ ^ ^ ^ +----------|----=unit=----|------------+ +----=unit=----+
NB2：就像@DamonJW一样，我不知道为什么x在这里。 它没有出现在Penner方程中 ，似乎没有在结果中使用：让我们总是将它设置为null
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 = svn29＆r = 29 – 足够好！
这个插件实现了最常见的缓动function： http ： //gsgd.co.uk/sandbox/jquery/easing/
查看了1.11 jquery代码。 x参数似乎意味着’百分比’，与初始时间值无关。 因此，x总是（0 <= x <= 1）（表示抽象系数），t是x * d（表示经过的时间）。