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

BounceIn

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

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

BounceOut

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

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

CubicIn

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

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

CubicInOut

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

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

CubicOut

素早く減速するEasingです。

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

SinIn

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

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

SinInOut

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

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

SinOut

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

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

SpringIn

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

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

SpringOut

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

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

おわりに

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

参考記事

• Easing Functions
• Xamarin.Forms.Easing Class