もし，コントロールを動かすなら，基本アニメーションで．[.NET MAUI]

はじめに

今回の内容

ちょっとしたおしゃれなギミックづくりに欠かせないのがアニメーション．今回はそのアニメーションをMAUIで作成するときに役立つ，基本アニメーションの使い方について紹介させていただきます．

具体的には，回転・拡大縮小・フェード・移動のアニメーションの実行の仕方を解説します．またそれらをXAML上で実行できるようにする方法についても説明させていただきます．

少し長いですが，分かり易く説明できたつもりなので，ぜひご覧ください．

動きとコード

回転

Button.RotateTo(360, 3000);

元の角度に対しての回転となる．

Button.RelRotateTo(360, 3000);

Relが付くとボタンを押したときの角度からの回転となる

Button.AnchorX -= Button.AnchorX / 2;
Button.RotateTo(360, 3000);

Anchorを変えると回転軸が動く．

引数は，(1.角度[dig]，　2.秒数[ms]，　3.easing※変化の勢い)です．

拡大縮小

Button.ScaleTo(2, 3000);

元の大きさに対しての拡大縮小となる．

Button.RelScaleTo(2, 3000);

Relが付くとボタンを押したときの大きさからの拡大縮小となる

Button.AnchorX -= Button.AnchorX / 2;
Button.RotateTo(360, 3000);

Anchorをずらすと拡大縮小軸が動く．

引数は，(1.大きさの変化量[倍]，　2.秒数[ms]，　3.easing※変化の勢い)です．

移動

Button.TranslateTo(100, 100);

引数は，(1.移動X[dp]，2.移動Y[dp]，3.秒数[ms]，4.easing※変化の勢い)です．

フェード

Button.FadeTo(0, 3000);

引数は，(1.不透明度[倍]，　2.秒数[ms]，　3.easing※変化の勢い)です．

XAMLから各アニメーションを呼び出す方法

C#で専用のクラスを作ることで，XAMLからそれを呼び出すことが出来ます．

ここでは，クリックするたびに移動するアニメーションを紹介します．

完成品

XAML

<ContentPage ...
    xmlns:animation="clr-namespace:Animation">

    <Button Text="PushAnimation">
            <Button.Triggers>
                <EventTrigger Event="Clicked">
                       <animation:PushAnimation X="100" Length="250"/>
                </EventTrigger>
            </Button.Triggers>
    </Button>

</ContentPage>

XAMLでは，次に紹介するC#のコードをイベントトリガーで呼び出しています．

C#コード

class PushAnimation : TriggerAction<VisualElement>
{
	public double X { get; set; } = 0;
	public double Y { get; set; } = 0;
        public Easing Easing { get; set; } = Easing.Linear;
        public int Length { get; set; } = 250;
        public int _pushTime { get; set; } = 1;

	protected override async void Invoke(VisualElement visual)
	{
            await visual.TranslateTo(X * _pushTime, Y * _pushTime, (uint)Length, Easing);
            _pushTime++;
	}
}

TriggerAction<VisualElement>を継承したクラスをXAMLのトリガーで呼び出します．公開したプロパティの値がXAML上で変更でき，トリガーイベントが発火するとクラス内のInvoke内の処理が行われます．