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是對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方程中 ，似乎沒有在結果中使用：讓我們總是將它設置為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 - 足夠好！

Answer 4

查看了1.11 jquery代碼。 x參數似乎意味着'百分比'，與初始時間值無關。 因此，x總是（0 <= x <= 1）（表示抽象系數），t是x * d（表示經過的時間）。

Answer 5

這個插件實現了最常見的緩動功能： http ： //gsgd.co.uk/sandbox/jquery/easing/