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

Easing

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

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

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

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

  • back は、オブジェクトが前方に移動する前に少し後方に移動する基本的なアニメーションを提供します。
  • bounce は、バウンドするアニメーションを提供します。
  • ease は、基本的な慣性アニメーションを提供します。
  • elastic は、基本的なスプリングのインタラクションを提供します。

標準関数​

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

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

追加関数​

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

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

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

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

例​

リファレンス

Methods​

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

二次関数、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);

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

out()​

tsx
static out(easing: number);

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

inOut()​

tsx
static inOut(easing: number);

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