Easing
Easingモジュールは、一般的なイージング関数を実装します。このモジュールは、アニメーションで物理的に信じられる動きを伝えるために、Animated.timing()によって使用されます。
いくつかの一般的なイージング関数の視覚化は、https://easings.net/で確認できます。
事前定義済みアニメーション
Easingモジュールは、以下のメソッドを通じていくつかの事前定義済みのアニメーションを提供します
backは、オブジェクトがわずかに後ろに戻ってから前に進む基本的なアニメーションを提供しますbounceは、バウンスアニメーションを提供しますeaseは、基本的な慣性アニメーションを提供しますelasticは、基本的なスプリングの相互作用を提供します
標準関数
3つの標準的なイージング関数が提供されています
poly関数は、四次、五次、およびその他の高次関数を実装するために使用できます。
追加の関数
追加の数学関数は、以下のメソッドによって提供されます
以下のヘルパーは、他のイージング関数を変更するために使用されます。
例
- TypeScript
- JavaScript
リファレンス
メソッド
step0()
static step0(n: number);
ステップ関数。nの正の値に対して1を返します。
step1()
static step1(n: number);
ステップ関数。nが1以上の場合に1を返します。
linear()
static linear(t: number);
線形関数、f(t) = t。位置は経過時間と一対一で相関します。
https://cubic-bezier.com/#0,0,1,1
ease()
static ease(t: number);
ゆっくりと速度を上げるオブジェクトに似た基本的な慣性相互作用。
https://cubic-bezier.com/#.42,0,1,1
quad()
static quad(t: number);
二次関数、f(t) = t * t。位置は経過時間の二乗に等しくなります。
https://easings.net/#easeInQuad
cubic()
static cubic(t: number);
三次関数、f(t) = t * t * t。位置は経過時間の三乗に等しくなります。
https://easings.net/#easeInCubic
poly()
static poly(n: number);
べき乗関数。位置は経過時間のN乗に等しくなります。
n = 4: https://easings.net/#easeInQuart n = 5: https://easings.net/#easeInQuint
sin()
static sin(t: number);
正弦関数。
https://easings.net/#easeInSine
circle()
static circle(t: number);
円関数。
https://easings.net/#easeInCirc
exp()
static exp(t: number);
指数関数。
https://easings.net/#easeInExpo
elastic()
static elastic(bounciness: number);
基本的な弾性相互作用。ばねが前後に振動するのに似ています。
デフォルトの跳ね返り係数は1で、1回少しだけオーバーシュートします。跳ね返り係数0はまったくオーバーシュートせず、N > 1の跳ね返り係数は約N回オーバーシュートします。
https://easings.net/#easeInElastic
back()
static back(s)
Animated.parallel()と組み合わせて使用し、アニメーションの開始時にオブジェクトがわずかに後ろにアニメーションする基本的な効果を作成します。
bounce()
static bounce(t: number);
基本的なバウンス効果を提供します。
https://easings.net/#easeInBounce
bezier()
static bezier(x1: number, y1: number, x2: number, y2: number);
CSS Transitionsのtransition-timing-functionと同等の3次ベジェ曲線を提供します。
3次ベジェ曲線を視覚化するのに役立つツールは、https://cubic-bezier.com/にあります。
in()
static in(easing: number);
イージング関数を順方向に実行します。
out()
static out(easing: number);
イージング関数を逆方向に実行します。
inOut()
static inOut(easing: number);
任意のイージング関数を対称にします。イージング関数は、期間の半分は順方向に実行され、残りの期間は逆方向に実行されます。