この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
こんにちは。モバイルアプリサービス部の加藤潤です。
前回は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を試してみました。
実際にどういうアニメーションになるのか忘れてしまった場合にお役立てください。
39
