by Observable

外觀

d3-ease ​

範例 · 緩動是一種扭曲時間的方法，用於控制動畫中的視覺動作。它最常使用於 緩入緩出。透過緩動時間，動畫轉場 會更順暢，並展現更合理的動作。

此模組中的緩動類型實作了 ease 方法，它會接收一個正規化時間 t，並傳回對應的「緩動」時間 tʹ。正規化時間和緩動時間通常都在 [0,1] 範圍內，其中 0 代表動畫的開始，而 1 代表結束；某些緩動類型，例如 easeElastic，可能會傳回略超出此範圍的緩動時間。一個好的緩動類型應該在 t = 0 時傳回 0，而在 t = 1 時傳回 1。

這些緩動類型主要根據 Robert Penner 的著作。

ease(t) ​

給定指定的標準化時間 t，通常在範圍 [0,1] 內，傳回「緩動」時間 tʹ，通常也在 [0,1] 內。0 代表動畫的開始，1 代表結束。如果 t = 0，一個好的實作會傳回 0；如果 t = 1，會傳回 1。例如，套用 easeCubic 緩動

js
const te = d3.easeCubic(t);

若要套用自訂的 elastic 緩動，請在動畫開始前建立緩動函數

js
const ease = d3.easeElastic.period(0.4);

然後在動畫期間套用緩動函數

js
const te = ease(t);

另請參閱 transition.ease。

easeLinear ​

來源 · 線性緩動；恆等函數；linear(t) 傳回 t。

easePoly ​

來源 · easePolyInOut 的別名。

easePolyIn ​

多項式緩動；將 t 提升到指定的 指數。如果未指定指數，則預設為 3，等於 easeCubicIn。

easePolyOut ​

反向多項式緩動；等於 1 - easePolyIn(1 - t)。如果未指定指數，則預設為 3，等於 easeCubicOut。

easePolyInOut ​

對稱多項式緩動；對於 t 在 0–0.5 的區間縮放 easePolyIn，對於 t 在 0.5–1 的區間縮放 easePolyOut。如果未指定指數，則預設為 3，等於 easeCubic。

easePoly.exponent(e) ​

傳回一個新的多項式緩動，其指數為指定的 e。例如，若要建立 easeLinear、easeQuad 和 easeCubic 的等效項

js
const linear = d3.easePoly.exponent(1);
const quad = d3.easePoly.exponent(2);
const cubic = d3.easePoly.exponent(3);

easeQuad ​

原始碼 · easeQuadInOut 的別名。

easeQuadIn ​

二次方緩和；等同於 easePolyIn.exponent(2)。

easeQuadOut ​

反向二次方緩和；等同於 1 - easeQuadIn(1 - t)。也等同於 easePolyOut.exponent(2)。

easeQuadInOut ​

對稱二次方緩和；縮放 t 在 0–0.5 時的 easeQuadIn，以及 t 在 0.5–1 時的 easeQuadOut。也等同於 easePoly.exponent(2)。

easeCubic ​

原始碼 · easeCubicInOut 的別名。

easeCubicIn ​

三次方緩和；等同於 easePolyIn.exponent(3)。

easeCubicOut ​

反向三次方緩和；等同於 1 - easeCubicIn(1 - t)。也等同於 easePolyOut.exponent(3)。

easeCubicInOut ​

對稱三次方緩和；縮放 t 在 0–0.5 時的 easeCubicIn，以及 t 在 0.5–1 時的 easeCubicOut。也等同於 easePoly.exponent(3)。

easeSin ​

原始碼 · easeSinInOut 的別名。

easeSinIn ​

正弦緩和；傳回 sin(t)。

easeSinOut ​

反向正弦緩和；等同於 1 - easeSinIn(1 - t)。

easeSinInOut ​

對稱正弦緩動；縮放 easeSinIn，t 在 0–0.5，以及 easeSinOut，t 在 0.5–1。

easeExp ​

來源 · easeExpInOut 的別名。

easeExpIn ​

指數緩動；將 2 提升到指數 10 × (t - 1)。

easeExpOut ​

反向指數緩動；等於 1 - easeExpIn(1 - t)。

easeExpInOut ​

對稱指數緩動；縮放 easeExpIn，t 在 0–0.5，以及 easeExpOut，t 在 0.5–1。

easeCircle ​

來源 · easeCircleInOut 的別名。

easeCircleIn ​

圓形緩動。

easeCircleOut ​

反向圓形緩動；等於 1 - easeCircleIn(1 - t)。

easeCircleInOut ​

對稱圓形緩動；縮放 easeCircleIn，t 在 0–0.5，以及 easeCircleOut，t 在 0.5–1。

easeElastic ​

來源 · easeElasticOut 的別名。

easeElasticIn ​

彈性緩動，如橡皮筋。震盪的 振幅 和 週期 是可配置的；如果未指定，它們分別預設為 1 和 0.3。

easeElasticOut ​

反向彈性緩動；等於 1 - elasticIn(1 - t)。

easeElasticInOut ​

對稱彈性緩動；縮放 elasticIn，t 在 0–0.5，以及 elasticOut，t 在 0.5–1。

easeElastic.amplitude(a) ​

傳回一個新的彈性緩動，其指定振幅為 a。振幅 a 必須大於或等於 1。

easeElastic.period(p) ​

傳回一個新的彈性緩衝，其指定週期為 p。

easeBack ​

原始碼 · easeBackInOut 的別名。

easeBackIn ​

預期緩衝，就像一位舞者在跳離地面之前彎曲膝蓋。可設定 過衝 的程度；如果未指定，則預設為 1.70158。

easeBackOut ​

反向預期緩衝；等於 1 - easeBackIn(1 - t)。

easeBackInOut ​

對稱預期緩衝；針對 t 在 0–0.5 時縮放 easeBackIn，針對 t 在 0.5–1 時縮放 easeBackOut。

easeBack.overshoot(s) ​

傳回一個新的後退緩衝，其指定過衝為 s。

easeBounce ​

原始碼 · easeBounceOut 的別名。

easeBounceIn ​

彈跳緩衝，就像橡膠球。

easeBounceOut ​

反向彈跳緩衝；等於 1 - easeBounceIn(1 - t)。

easeBounceInOut ​

對稱彈跳緩衝；針對 t 在 0–0.5 時縮放 easeBounceIn，針對 t 在 0.5–1 時縮放 easeBounceOut。