Jetpack Composeのアニメーション設定(easing)の定義と効果について

Easingとは？

Easing関数は、アニメーションの速度変化を定義するために使用されます。アニメーションが開始から終了までどのように進行するか、つまりアニメーションのテンポを制御します。

• LinearEasing
• FastOutSlowInEasing
• FastOutLinearInEasing
• LinearOutSlowInEasing

は、Jetpack Composeなどで使用される一般的なEasing関数の例です。それぞれの関数はアニメーションに異なる特性を与え、ユーザーインタフェースの動きをより自然またはダイナミックに見せることができます。

定義

Easing.ktからの抜粋です。

/**
 * Elements that begin and end at rest use this standard easing. They speed up quickly
 * and slow down gradually, in order to emphasize the end of the transition.
 *
 * Standard easing puts subtle attention at the end of an animation, by giving more
 * time to deceleration than acceleration. It is the most common form of easing.
 *
 * This is equivalent to the Android `FastOutSlowInInterpolator`
 */
val FastOutSlowInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)

/**
 * Incoming elements are animated using deceleration easing, which starts a transition
 * at peak velocity (the fastest point of an element’s movement) and ends at rest.
 *
 * This is equivalent to the Android `LinearOutSlowInInterpolator`
 */
val LinearOutSlowInEasing: Easing = CubicBezierEasing(0.0f, 0.0f, 0.2f, 1.0f)

/**
 * Elements exiting a screen use acceleration easing, where they start at rest and
 * end at peak velocity.
 *
 * This is equivalent to the Android `FastOutLinearInInterpolator`
 */
val FastOutLinearInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 1.0f, 1.0f)

/**
 * It returns fraction unmodified. This is useful as a default value for
 * cases where a [Easing] is required but no actual easing is desired.
 */
val LinearEasing: Easing = Easing { fraction -> fraction }

結局どんな動きするの？

• FastOutSlowInEasing
  • 定義: CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)
  • 特徴: アニメーションは素早く加速し、徐々に減速して終了します。これにより、アニメーションの終了を強調し、最後の動きに微妙な注意を向けます。加速よりも減速に時間を多く割いています。
  • 使用場面: 開始と終了が静止している要素の標準的なイージング。多くのUIアニメーションで最も一般的に使用されます。
• LinearOutSlowInEasing
  • 定義: CubicBezierEasing(0.0f, 0.0f, 0.2f, 1.0f)
  • 特徴: ピーク速度（要素の動きの最速点）でアニメーションが開始し、静止状態で終了します。つまり、最初から減速していく動きをします。
  • 使用場面: 新たに表示される要素のアニメーションに使用され、最初の動きを速くして徐々に停止に向かわせます。
• FastOutLinearInEasing
  • 定義: CubicBezierEasing(0.4f, 0.0f, 1.0f, 1.0f)
  • 特徴: 静止状態から開始し、ピーク速度で終了します。つまり、加速していく動きをします。
  • 使用場面: 画面から消える要素に使用され、速度を上げていくアニメーションに適しています。
• LinearEasing
  • 定義: Easing { fraction -> fraction }
  • 特徴: アニメーションの進行具合が直線的に変化します。開始から終了までの速度が一定です。
  • 使用場面: 特にイージングを必要としない場合や、一定の速度でアニメーションさせたい場合に使用します。

これらは、アニメーションにリズムや生命を吹き込むために重要です。
ユーザーにとって快適で予測可能なインタラクションを提供できますので色々といじってみましょう。