PG.Lib

アプリ開発関連とかガジェット関連とか

Xamarin Forms コントロールをアニメーションさせる

今回はコントロールに動きを出すためのアニメーションを実装する方法を紹介します。


まず、XAML側にこんなコントロールがあったとします。

<Button Text="ほげ!!" x:Name="btnHoge" />

これを色々動かしたいと思います。

上下左右

btnHoge.TranslateTo(0, 100, 280, Easing.Linear);
//btnHoge.TranslateTo(X軸, Y軸, 移動時間, 動き方);

回転

btnHoge.RotateTo(8, 15);
//btnHoge.RotateTo(角度, 時間, 動き方);

拡大縮小

btnHoge.ScaleTo(1.05, 1000, Easing.SinIn);
//btnHoge.ScaleTo(拡大率, 時間, 動き方);

解説

まず、それぞれで共通しているのが、後半2つの引数が任意になっていて、アニメーションの時間と動き方を設定します。

アニメーションの時間が長いほどゆったり動きます。

動き方は Easing で列挙されているので、実際に動かしつついい感じの動作を選択するのが良いと思います。

UWPみたいに、Blend 使って動きが見れたら素敵だなーと思います。

前半部分の引数は、アニメーションの動く量を指定します。

時と場合にもよりますが、コントロールに動きがあることで、アプリがよりリッチなものになってくるかと思います。

実装例

例として、ボタンをゆっくり大きくしたり小さくしたりしてみます。

Task.Factory.StartNew(() =>
{
    while (true)
    {
        btnHoge.ScaleTo(1.05, 1000, Easing.SinIn);
        System.Threading.Thread.Sleep(1000);
        btnHoge.ScaleTo(0.96, 1800, Easing.SinIn);
        System.Threading.Thread.Sleep(1800);
    }
});

アニメーションを繰り返すため、Taskの別スレッドでScaleToを繰り返します。

ポイントとしてはアニメーションは非同期で実行されてしまうので、繰り返す場合は処理を同期させる必要があります。

UWPのStoryBoard的に実装できたらいいなーと思うのですが、たぶん探したらライブラリとかありそう。

若干我流な感じもしますが、参考になればと思います。