イージング関数ギャラリー

withTimingのeasingオプションに渡せる30種類のイージング関数を、カーブと実際の動きで一覧します。

easings.netでおなじみの30種類のイージングを、react-native-reanimatedのEasingモジュールそのもので描いています。別実装ではなく、動きを調整するのwithTimingにそのまま渡せる関数です。

カードをタップすると、そのイージングでドットが動く様子を再生します。

見方

各カードの名前はease + In/Out/InOut + 関数名の形です。

• InはEasing.in()(等号は素の関数と同じ)、OutはEasing.out()、InOutはEasing.inOut()で包んだものです
• Sine・Quad・CubicはEasing.sin・Easing.quad・Easing.cubic、Quart・QuintはEasing.poly(4)・Easing.poly(5)にあたります
• Back・ElasticはそれぞれEasing.back()・Easing.elastic()を既定の引数で呼んだものです

使い方はどれも同じで、withTimingの第2引数に渡すだけです。

withTiming(1, { duration: 500, easing: Easing.out(Easing.quad) });

In・Out・InOutの意味や、linear・ease・bezier・stepsといったその他の関数については動きを調整するで扱っています。

この章のもとになった公式ドキュメント

• withTiming