jQuery 的缓动函数是如何工作的？举个例子：
easeInQuad = function (x, t, b, c, d) {
return c*(t/=d)*t + b;
};
这是如何运作的？每个参数代表什么？我将如何为动画实现一些愚蠢的缓动？
另外我将如何将缓动模式附加到 jQuery，将它加载到 $.easing 中是否足够好？
jQuery 缓动函数——变量的理解
IT技术
javascript
jquery
animation
easing-functions
2021-03-14 21:50:31
5个回答
根据jQuery 1.6.2源码，缓动函数的含义如下。该函数在动画期间的不同时间点被调用。在它被称为的瞬间，
- x 和 t 都表示现在是什么时间，相对于动画的开始。x 表示为 [0,1] 范围内的浮点数，其中 0 是开始，1 是结束。t 以动画开始后的毫秒数表示。
- d 是动画的持续时间，在 animate 调用中指定，以毫秒为单位。
- b=0 和 c=1。
据我所知，jQuery 并没有让你直接控制动画 step 函数何时被调用，它只让你说“如果我在时间 t 被调用，那么我应该在整个动画中走这么远。” 因此，例如，您不能要求您的对象在移动速度更快的时候更频繁地重绘。另外，我不知道为什么其他人说 b 是起始值而 c 是变化——这不是 jQuery 源代码所说的。
例如，如果您想定义自己的缓动函数来执行与 easyInQuad 相同的操作，
$.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }})
$('#marker').animate({left:'800px'},'slow','myfunc');
一个具体的例子，
假设我们的初始值为1000，我们希望在3 秒内达到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 的方程中，也没有出现在结果中：让总是将他设置为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?spec=svn29&r=29 - 足够好！
这个插件实现了最常见的缓动功能：http : //gsgd.co.uk/sandbox/jquery/easing/
浏览了 1.11 jquery 代码。x 参数似乎表示“百分比”，与初始时间值无关。因此，x 总是 (0 <= x <= 1)（表示抽象系数），而 t 是 x * d（表示经过的时间）。