Xamarin.Froms でビューをアニメーションさせる

ビューにはアニメーション用のメソッドが用意されています。 これを使用することで簡単にアニメーションを設定することができます。

今回は"BoxView"を使用してアニメーションを設定します。

サンプルはこちら

github.com

アニメーション用のメソッド

アニメーション用のメソッドには以下のものが用意されています。

  • FadeTo
  • LayoutTo
  • RotateTo
  • RotateXTo
  • RotateYTo
  • RelRotatoTo
  • ScaleTo
  • RelScaleTo
  • TranslateTo

移動アニメーションの設定

ビューに移動アニメーションを設定するには、"TranslateTo"または"LayoutTo"メソッドを使用します。
"LayouTo"メソッドはビューのレイアウトを変更するためのメソッドですが、 ビューのサイズを変更せずに、ビューの位置だけを変更することで、 移動アニメーションを実現できます。

Xamarin.Formsでビューに移動アニメーションを設定する

スケールアニメーションの設定

ビューに拡大縮小アニメーションを設定するには"ScaleTo"または"RelScaleTo"メソッドを使用します。
"Rel"メソッドについては後ほど説明します。

Xamarin.Formsでビューに拡大縮小アニメーションを設定する

回転アニメーションの設定

ビューに回転アニメーションを設定するには"RotateTo"系メソッドを使用します。

Xamarin.Formsでビューに回転アニメーションを設定する

Relアニメーションについて

Relアニメーションは現在の状態に単純にパラメータを加算させたアニメーションを実行します。
上記の回転アニメーションのサンプルコードでは、現在の状態から30度回転させるアニメーションになります。

  • RotateTo : ベースのビューを30度回転させた位置へのアニメーション  30度回転した状態になると、以降アニメーションしない
  • RelRotateTo : ビューを現在の角度から30度回転させる
    30度回転した状態になっても、アニメーションを指定するたびに、30度ずつ回転する
    30度→60度→90度・・・