Xamarin.FormsでUIのアニメーション

youtu.be

Xamarin.Formsにはコントロールをアニメーションさせるシンプルなメソッドが用意されています.

アニメーションの種類

UIコントロールのアニメーションには以下の種類があります.

docs.microsoft.com

• FadeTo 透明度を上げたり下げたりする
• LayoutTo 指定したRectangle内にフィットさせる
• RelRotateTo 現時点の角度から指定した回転角だけ回転させる.
• RelScalTo 現時点の拡大率から指定した拡大率分だけ拡大させる.
• RotateTo 0度を基準にして指定した角度まで回転させる.平面回転.
• RotateXTo 0度を基準にして指定した角度まで回転させる. Y軸を中心に回転.
• RotateYTo 0度を基準にして指定した角度まで回転させる. X軸を中心に回転.
• ScaleTo 1(等倍)を基準にして指定した倍率まで拡大させる.
• TranslateTo 現在の座標から指定した座標へ移動させる.

また,アニメーションの変化の仕方,つまり等速度で変化していくのか,出だしが速くて終わりのあたりはゆっくりなど,変化のバリエーションを指定することができます.

docs.microsoft.com

• BounceIn
• BounceOut
• CubicIn
• CubicInOut
• CubicOut
• Linear
• SinIn
• SinInOut
• SinOut
• SpringIn
• SpringOut

使い方

基本的には回転角度や位置についてある値まで何秒かけてアニメーションするか,そしてアニメーションのちょっとしたエフェクト(Easing)を指定します.

値はX方向,Y方向のピクセル数だったり角度だったりします.

かける時間はミリ秒です.

以下のようにすると,1秒かけて360度回転させることができます.

rotateButton.RotateTo(360, 1000);

シンプルですね.

加えて,この変化のアニメーションのエフェクトを指定するとアニメーションにアクセントをつけることができます.

rotateButton.RotateTo(360, 1000, Easing.SpringOut);

このエフェクト(Easing)ですが種類とその動きについては以下の公式ドキュメントが詳しいです.

docs.microsoft.com

これらのアニメーションのためのメソッドはボタンやラベルだけでなくStackLayoutなどのレイアウトコントロールなどでも使用できます.

メソッドはすべて非同期で,アニメーションの完了を待つために通常はawaitをつけて使います.

await rotateButton.RotateTo(360, 1000);

複数のアニメーションを順次実行する場合は,単純に並べればいいだけです.

            await fadeButton.RotateTo(360, 500, Easing.SpringOut);
            await scaleButton.ScaleTo(1.1, 200);
            await scaleButton.ScaleTo(1, 200, Easing.SpringOut);
            await translateButton.TranslateTo(100, 0, 500, Easing.SpringIn);

さてこのアニメーションによって角度や位置といったプロパティが変更されるわけですが,アニメーションによって変わったこれらの値を元に戻しておかないと,2回目に実行したときに動かない場合があります.

それは,アニメーションの目的の値を最初から満たしてしまうからです.

ですので,これらコントロールのちょっとしたエフェクトに使う場合はアニメーション後に元の位置,状態に戻るようにするとよいと思います.

複数のアニメーションを同時に適用する.

            await Task.WhenAll(
                rotateButton.RotateTo(360, 1000),
                rotateButton.RotateXTo(360, 1000),
                rotateButton.RotateYTo(360, 1000)
            );

これで,平面回転,X軸回転,Y軸回転が1秒間の間に同時に行われます.

            await Task.WhenAll(
                rotateButton.RotateTo(360, 1000),
                rotateButton.RotateXTo(360, 1000),
                rotateButton.RotateYTo(360, 1000)
            );

            //値をリセット
            rotateButton.Rotation = 0;
            rotateButton.RotationX = 0;
            rotateButton.RotationY = 0;

ソースコード

github.com