メインコンテンツへスキップ

Easing

Easingモジュールは、一般的なイージング関数を実装します。このモジュールは、アニメーションで物理的に信憑性のある動きを表現するために、Animated.timing()によって使用されます。

いくつかの一般的なイージング関数の視覚化は、https://easings.net/で確認できます。

定義済みアニメーション​

Easingモジュールは、以下のメソッドを通じていくつか定義済みのアニメーションを提供します。

  • backは、オブジェクトが前進する前に少し後退する基本的なアニメーションを提供します。
  • bounceは、跳ねるようなアニメーションを提供します。
  • easeは、基本的な慣性アニメーションを提供します。
  • elasticは、基本的なバネのようなインタラクションを提供します。

標準関数​

3つの標準的なイージング関数が提供されています。

poly関数は、4次、5次、その他のより高次の関数を実装するために使用できます。

追加の関数​

追加の数学関数が以下のメソッドによって提供されます。

  • bezierは、3次ベジェ曲線を提供します。
  • circleは、円関数を提供します。
  • sinは、正弦関数を提供します。
  • expは、指数関数を提供します。

以下のヘルパーは、他のイージング関数を変更するために使用されます。

  • inは、イージング関数を順方向に実行します。
  • inOutは、任意のイージング関数を対称にします。
  • outは、イージング関数を逆方向に実行します。

使用例​

リファレンス

メソッド​

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。位置は経過時間と1対1で相関します。

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);

2次関数、f(t) = t * t。位置は経過時間の2乗に等しくなります。

https://easings.net/#easeInQuad

cubic()​

tsx
static cubic(t: number);

3次関数、f(t) = t * t * t。位置は経過時間の3乗に等しくなります。

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);

バネが前後に振動するような、基本的な弾性インタラクションです。

デフォルトの弾性(bounciness)は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に相当する、3次ベジェ曲線を提供します。

3次ベジェ曲線を視覚化するための便利なツールは、https://cubic-bezier.com/で見つけることができます。

in()​

tsx
static in(easing: number);

イージング関数を順方向に実行します。

out()​

tsx
static out(easing: number);

イージング関数を逆方向に実行します。

inOut()​

tsx
static inOut(easing: number);

任意のイージング関数を対称にします。イージング関数は、期間の半分を順方向に実行し、残りの半分を逆方向に実行します。