[Xamarin.Forms] Easingクラスに用意されているEasing Functionsを試してみた

はじめに

こんにちは。モバイルアプリサービス部の加藤潤です。
前回はXamarin.Formsで回転、拡大・縮小、移動、フェードなどのシンプルなアニメーションを実行する方法についてご紹介しました。
今回はアニメーションのEasing Functionsについての記事です。
公式ドキュメントを見ると、説明は書いてあるのですが実際にどういったアニメーションになるのかわからなかったので実際に試して画面キャプチャを撮ってみました。

検証環境

以下の環境で動作を確認しています。

  • Xamarin Studio Community バージョン 6.2(build 1829)
  • Xamarin.Forms バージョン 2.3.3.193
  • iPhone 7 iOS 10.2(シミュレーター)

Easing Functionsとは

アニメーション中の速度変化をコントロールするためのものです。
これにより、アニメーションに緩急をつけたり、より自然なアニメーションにすることができます。
Xamarin.Formsでは以下の種類がEasingクラスによって提供されています。

  • Linear
  • BounceIn
  • BounceOut
  • CubicIn
  • CubicInOut
  • CubicOut
  • SinIn
  • SinInOut
  • SinOut
  • SpringIn
  • SpringOut

試してみた

前回作成したアプリを少し改良し、TranslateToでBoxViewが左から右に移動するようなアニメーションに各Easing Functionを適用してみます。キャプチャはiOSですがAndroidも同じ結果となります。

Linear

等速のEasingです。一定の速度でアニメーションが進行します。
アニメーションメソッドの最後のパラメーターでEasing.Linearを指定します。

await boxView.TranslateTo(250, 0, 1000, Easing.Linear);

また、Easing省略時はデフォルトでLinearになるので、省略する書き方でも同じです。(前回の記事はEasingを省略していたので全てLinearになっていたということです。)

await boxView.TranslateTo(250, 0, 1000);

ios_linear

BounceIn

最初にはずむような動きをするEasingです。

await boxView.TranslateTo(250, 0, 1000, Easing.BounceIn);

ios_bounce_in

BounceOut

最後にはずむような動きをするEasingです。

await boxView.TranslateTo(250, 0, 1000, Easing.BounceOut);

ios_bounce_out

CubicIn

ゆっくりと加速するEasingです。

await boxView.TranslateTo(250, 0, 1000, Easing.CubicIn);

ios_cubic_in

CubicInOut

最初に加速し、最後に減速するEasingです。

await boxView.TranslateTo(250, 0, 1000, Easing.CubicInOut);

ios_cubic_in_out

CubicOut

素早く減速するEasingです。

await boxView.TranslateTo(250, 0, 1000, Easing.CubicOut);

ios_cubic_out

SinIn

スムースに加速するEasingです。

await boxView.TranslateTo(250, 0, 1000, Easing.SinIn);

ios_sin_in

SinInOut

最初にスムースに加速し、最後にスムースに減速するEasingです。

await boxView.TranslateTo(250, 0, 1000, Easing.SinInOut);

ios_sin_in_out

SinOut

スムースに減速するEasingです。

await boxView.TranslateTo(250, 0, 1000, Easing.SinOut);

ios_sin_out

SpringIn

終わりに向かってとても素早く加速するEasingです。

await boxView.TranslateTo(250, 0, 1000, Easing.SpringIn);

ios_spring_in

SpringOut

終わりに向かって素早く減速するEasingです。

await boxView.TranslateTo(250, 0, 1000, Easing.SpringOut);

ios_spring_out

おわりに

今回はEasingクラスによって提供されている各Easing Functionsを試してみました。
実際にどういうアニメーションになるのか忘れてしまった場合にお役立てください。

参考記事