Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

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

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

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

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

こんな感じです。

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

github.com

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

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

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

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

最初のページで ScaleTo を使ってアニメーションすると iOSTwitter のようにできそうです。各 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 で定義されていて、TranslateTopublic 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&nbsp;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 も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば 弊社ページ を覗いてみてください。

以上です。

エクセルソフト | ダウンロード | 学習用リソース | JXUG リンクページ | ブログ購読