javascript jQuery 缓动函数——变量的理解
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5916058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery easing function — variables' comprehension
提问by qwertymk
How does the easing function for jQuery work? Take for example:
jQuery 的缓动函数是如何工作的？举个例子：
easeInQuad = function (x, t, b, c, d) {
return c*(t/=d)*t + b;
};
How does that work? What does each parameter hold? How would I implement some dumb easing for an animation?
这是如何运作的？每个参数代表什么？我将如何为动画实现一些愚蠢的缓动？
Also how would I attach an easing pattern to jQuery, is loading it into $.easing good enough?
另外我将如何将缓动模式附加到 jQuery，将它加载到 $.easing 中是否足够好？
回答by DamonJW
According to the jQuery 1.6.2 source, the meaning of the easing function is as follows. The function is called at various points in time during the animation. At the instants it is called,
根据jQuery 1.6.2源码，缓动函数的含义如下。该函数在动画期间的不同时间点被调用。在它被称为的瞬间，
- x and t both say what the time is now, relative to the start of the animation. x is expressed as a floating point number in the range [0,1], where 0 is the start and 1 is the end. t is expressed in milliseconds since the start of the animation.
- d is the duration of the animation, as specified in the animate call, in milliseconds.
- b=0 and c=1.
- x 和 t 都表示现在是什么时间，相对于动画的开始。x 表示为 [0,1] 范围内的浮点数，其中 0 是开始，1 是结束。t 以动画开始后的毫秒数表示。
- d 是动画的持续时间，在 animate 调用中指定，以毫秒为单位。
- b=0 和 c=1。
The easing function should return a floating point number in the range [0,1], call it r. jQuery then computes x=start+r*(end-start), where startand endare the start and end values of the property as specified in the call to animate, and it sets the property value to x.
缓动函数应该返回 [0,1] 范围内的一个浮点数，调用它r。然后 jQuery 计算x=start+r*(end-start)，其中start和end是在调用 animate 时指定的属性的开始和结束值，并将属性值设置为x。
As far as I can see, jQuery doesn't give you direct control over when the animation step function is called, it only lets you say "if I am called at time t, then I should be thus far through the entire animation." Therefore you cannot, for example, ask for your object to be redrawn more frequently at times when it is moving faster. Also, I don't know why other people say b is the start value and c is the change -- that's not what jQuery source code says.
据我所知，jQuery 并没有让你直接控制动画 step 函数何时被调用，它只让你说“如果我在时间 t 被调用，那么我应该在整个动画中走这么远。” 因此，例如，您不能要求您的对象在移动速度更快的时候更频繁地重绘。另外，我不知道为什么其他人说 b 是起始值而 c 是变化——这不是 jQuery 源代码所说的。
If you wanted to define your own easing function to do the same as easeInQuad, for example,
例如，如果您想定义自己的缓动函数来执行与 easyInQuad 相同的操作，
$.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }})
$('#marker').animate({left:'800px'},'slow','myfunc');
回答by abernier
A concrete example,
一个具体的例子，
Suppose our initial value is 1000and we want to reach 400in 3s:
假设我们的初始值为1000，我们希望在3 秒内达到400：
var initialValue = 1000,
destinationValue = 400,
amountOfChange = destinationValue - initialValue, // = -600
duration = 3,
elapsed;
Let's go from 0s to 3s:
让我们从 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
So compared to the synopsis:
因此，与概要相比：
$.easing.easeInQuad = function (x, t, b, c, d) {...}
we can deduce:
我们可以推断：
x t b c d
| | | | |
null elapsed initialValue amountOfChange duration
NB1: One important thing is that elapsed(t) and duration(d) should be expressed in the same unit, eg: here 'seconds' for us, but could be 'ms' or whatever. This is also true for initialValue(b) and amountOfChange(c), so to sum-up:
NB1：一件重要的事情是elapsed( t) 和duration( d) 应该以相同的单位表示，例如：这里是“秒”对我们来说，但可以是“毫秒”或其他什么。对于initialValue( b) 和amountOfChange( c) 也是如此，总结一下：
x t b c d
| | | | |
null elapsed initialValue amountOfChange duration
^ ^ ^ ^
+----------|----=unit=----|------------+
+----=unit=----+
NB2: Like @DamonJW, I don't know why xis here. It does not appear in Penner's equationsand does not seem to be usedin result: let always set him to null
NB2：就像@DamonJW一样，我不知道为什么x会在这里。它没有出现在Penner 的方程中，也没有出现在结果中：让总是将他设置为null
回答by two7s_clash
t: current time, b: start value, c: change from the start value to the end value, d: duration.
t：当前时间，b：开始值，c：从开始值到结束值的变化，d：持续时间。
Here is how it works: http://james.padolsey.com/demos/jquery/easing/(curve representing when a CSS property is changed).
以下是它的工作原理：http: //james.padolsey.com/demos/jquery/easing/（表示 CSS 属性更改时的曲线）。
Here is how I would implement some dumb easing: http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm(math is not my strong suit)
这是我如何实现一些愚蠢的缓动：http: //www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm（数学不是我的强项）
You would extend like any of these: http://code.google.com/p/vanitytools/source/browse/trunk/website/js/custom_easing.js?spec=svn29&r=29- good enough!
您可以像以下任何一个扩展：http: //code.google.com/p/vanitytools/source/browse/trunk/website/js/custom_easing.js?spec=svn29&r=29- 足够好！
回答by gblazex
This plugin implements the most common easing functions: http://gsgd.co.uk/sandbox/jquery/easing/
这个插件实现了最常见的缓动功能：http: //gsgd.co.uk/sandbox/jquery/easing/
回答by Kirill Kharchenko
Looked through the 1.11 jquery code. The x parameter seems to mean 'percent', independent from initial time value. So, x is always (0 <= x <= 1) (means abstract coefficient), and t is x * d (means time elapsed).
浏览了 1.11 jquery 代码。x 参数似乎表示“百分比”，与初始时间值无关。因此，x 总是 (0 <= x <= 1)（表示抽象系数），而 t 是 x * d（表示经过的时间）。
