跳到主要內容

Easing

Easing 模組實作了常用的 easing 函數。此模組被 Animated.timing() 用於在動畫中傳達物理上可信的運動。

你可以在 https://easings.net/ 找到一些常見 easing 函數的可視化。

預定義動畫​

Easing 模組透過以下方法提供幾個預定義動畫

  • back 提供一個基本動畫，物件在向前移動之前會稍微向後退
  • bounce 提供一個彈跳動畫
  • ease 提供一個基本的慣性動畫
  • elastic 提供一個基本的彈簧互動

標準函數​

提供了三個標準的 easing 函數

poly 函數可用於實作 quartic、quintic 和其他更高次方的函數。

額外函數​

額外的數學函數由以下方法提供

  • bezier 提供一個立方貝茲曲線
  • circle 提供一個圓形函數
  • sin 提供一個正弦函數
  • exp 提供一個指數函數

以下輔助函數用於修改其他 easing 函數。

  • in 正向執行 easing 函數
  • inOut 使任何 easing 函數對稱
  • out 反向執行 easing 函數

範例​

參考

方法​

step0()​

tsx
static step0(n: number);

一個步進函數，對於 n 的任何正值都返回 1。

step1()​

tsx
static step1(n: number);

一個步進函數，如果 n 大於或等於 1，則返回 1。

linear()​

tsx
static linear(t: number);

線性函數，f(t) = t。位置與經過的時間一對一相關。

https://cubic-bezier.com/#0,0,1,1

ease()​

tsx
static ease(t: number);

基本的慣性互動，類似於物體緩慢加速到一定速度。

https://cubic-bezier.com/#.42,0,1,1

quad()​

tsx
static quad(t: number);

二次函數，f(t) = t * t。位置等於經過時間的平方。

https://easings.net/#easeInQuad

cubic()​

tsx
static cubic(t: number);

三次函數，f(t) = t * t * t。位置等於經過時間的立方。

https://easings.net/#easeInCubic

poly()​

tsx
static poly(n: number);

冪函數。位置等於經過時間的 N 次方。

n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint

sin()​

tsx
static sin(t: number);

正弦函數。

https://easings.net/#easeInSine

circle()​

tsx
static circle(t: number);

圓形函數。

https://easings.net/#easeInCirc

exp()​

tsx
static exp(t: number);

指數函數。

https://easings.net/#easeInExpo

elastic()​

tsx
static elastic(bounciness: number);

基本的彈性互動，類似於彈簧來回震盪。

預設彈性係數為 1，會稍微過衝一次。彈性係數為 0 則完全不會過衝，而彈性係數 N > 1 將過衝約 N 次。

https://easings.net/#easeInElastic

back()​

tsx
static back(s)

與 Animated.parallel() 一起使用，以建立一個基本效果，使物件在動畫開始時稍微向後動畫。

bounce()​

tsx
static bounce(t: number);

提供基本的彈跳效果。

https://easings.net/#easeInBounce

bezier()​

tsx
static bezier(x1: number, y1: number, x2: number, y2: number);

提供立方貝茲曲線，相當於 CSS Transitions 的 transition-timing-function。

在 https://cubic-bezier.com/ 可以找到一個視覺化立方貝茲曲線的實用工具。

in()​

tsx
static in(easing: number);

正向執行 easing 函數。

out()​

tsx
static out(easing: number);

反向執行 easing 函數。

inOut()​

tsx
static inOut(easing: number);

使任何 easing 函數對稱。easing 函數將在持續時間的一半時間正向執行，然後在剩餘持續時間內反向執行。