Xamarin.Forms でアニメーションを使ってみた

こんにちは。エクセルソフトの田淵です。

Xamarin.Forms では C# のみではありますが、アニメーションがサポートされています。(XAML の Storyboard は未サポート)

あるアプリでアニメーションしてるのを見て、さりげなくアニメーションするのは良いなと思い、試してみました。

こんな感じです。

プロジェクトは GitHub に上げておきました。(コードビハインドで書いてしまっています。すみません。)

github.com

デフォルトで用意されているアニメーション

アニメーションの種類として、以下があります。

TranslateTo : VisualElement の TranslationX と TranslationY プロパティをアニメーション化します。
ScaleTo : VisualElement の Scale プロパティをアニメーション化します。
RelScaleTo : VisualElement の Scale プロパティに（現在の状態から）増減の差分のアニメーションを適用します。
RotateTo : VisualElement の Rotation プロパティをアニメーション化します。
RelRotateTo VisualElement の Rotation プロパティに（現在の状態から）増減の差分のアニメーションを適用します。
RotateXTo : VisualElement の RotationX プロパティをアニメーション化します。
RotateYTo : VisualElement の RotationY プロパティをアニメーション化します。
FadeTo : VisualElement の Opacity プロパティをアニメーション化します。

ScaleTo で Twitter のスプラッシュスクリーンっぽいやつ

最初のページで ScaleTo を使ってアニメーションすると iOS の Twitter のようにできそうです。各 OS の本来のスプラッシュスクリーンを最初のページと同じ見た目にしておけばかなりそれっぽくなりそうですね。

gist.github.com

初期データを引っ張ってきたり、多少時間の掛かる処理を入れられそうです。

この処理の後で、Application.Current.MainPage = new MainPage(new NextPage()); でメインページを置き換えることで遷移して最初のページとなります。@crocus7724 さんありがとうございます。

Navigation.PushAsync で「本来の」最初のページに移動するので、遷移先のページの OnAppearing() で Navigation.RemovePage(Navigation.NavigationStack[0]); して、最初の NavigationStack を消して遷移先のページが最初のページっぽくしています。

TranslateTo で VisualElement の移動をアニメーション

上記のアニメーションは Xamarin.Forms の ViewExtentions で定義されていて、TranslateTo は public static Task<bool> TranslateTo(this VisualElement view, double x, double y, uint length = 250, Easing easing = null); です。X,Y は 320、480 くらいが画面右下になりそうですが、View のサイズを計算して動かすのが良いでしょう。移動時間の uint は標準値が 250 のようですが、めっちゃ早いので、1000～2000 くらいが良さそうです。

TranslateTo でオブジェクトを移動する場合、標準で以下のイージング関数が用意されています。私のサンプルで試せるようになっているので、触ってみてください。

BounceIn : 最初にバウンドするアニメーション。
BounceOut : 最後にバウンドするアニメーション。
CubicIn : ゆっくりと加速するアニメーション。
CubicInOut : 最初に加速し、最後に減速するアニメーション。
CubicOut : 最後に減速するアニメーション。
Liner : 一定速度のアニメーション。デフォルト値。
SinIn : スムーズに加速するアニメーション。
SinInOut : 最初にスムーズに加速し、最後にスムーズに減速するアニメーション。
SinOut : スムーズに減速するアニメーション。
SpringIn : 最後に向かって加速していくアニメーション。
SpringOut : 最後に向かって減速していくアニメーション。

どうしても XAML の Storyboard でアニメーションを記述したい

@ticktackmobile さんのライブラリを使うのはどうでしょう？

ticktack.hatenablog.jp

参考資料（公式ドキュメント）

Xamarin ドキュメントは以下です。

デフォルトで用意されているアニメーション

developer.xamarin.com

イージング関数

developer.xamarin.com

MSDN の解説ページ (.NET で使えるイージング関数が紹介されており、説明が詳しいです。)

イージング関数

おまけ：Picker

Picker の値から欲しい値（今回は Easing）を取得するのに Index から Dictionary を参照して引っ張ってきていますが、これは Xamarin.Forms の Picker の Bindable なプロパティとして

public static readonly BindableProperty SelectedIndexProperty;
public static readonly BindableProperty TextColorProperty;
public static readonly BindableProperty TitleProperty;

しか用意されていないためです。このやり方は、Xamarin の API ドキュメントに載っていました。(Enum で用意しても良いかも？)

面倒ですね。今回は使っていませんが、Infragistics の Karl さんが Bindable な Picker を作ってくれています。気になる方は試してみてください(^^)

Xamarin Forms Bindable Picker v2oceanware.wordpress.com

@matatabi_ux さんも Bindable Picker を自作されていますね。

matatabi-ux.hateblo.jp

Xamarin 気になった方は

是非ダウンロードして触ってみてください。Visual Studio 2015 をご利用の方は Update 3 にアップデートする際にカスタムインストールで Xamarin を追加しましょう。学習用リソースや JXUG リンクページに参考資料を纏めてますので併せてどうぞ。

Xamarin の導入支援サービスを始めました。ベースは基本的なアプリを一緒に作ることで Xamarin を使えるようになって頂く内容ですが、ご要望に応じて講習内容のカスタマイズも可能です。詳しくは田淵までお問い合わせください(^^)

ytabuchi.hatenablog.com

Xamarin の情報が欲しい方はこのブログも購読いただいたり、私のTwitterアカウントをフォローいただいたりすると嬉しいです。

私が所属しているエクセルソフトの宣伝を少しさせてください。弊社は開発者向けの様々なソフトウェアを扱っています。おなじみの ReSharper (JetBrains)、や Atlassian の JIRA, Confluence、Office/PDF ファイルを .NET/Java で操作するライブラリ Aspose（アスポーズ）、Windows アプリ、Web ページ、iOS/Android アプリの UI テストができる TestComplete などお勧めです(^^) また、Visual Studio Professional/Enterprise with MSDN も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば弊社ページを覗いてみてください。

以上です。