[.NET MAUI][アニメーション] 相対拡大縮小

.NET MAUI

.NET MAUI TIPS

2022.10.02

本記事の概要
相対的に拡大や縮小をする
.NET MAUI Tips

本記事の概要

この記事では相対的に拡大や縮小をするアニメーションについて説明します。

公式サイト情報はコチラを参照してください。

相対的に拡大縮小するアニメーションの例

相対的に拡大や縮小をする

相対的に拡大や縮小をするには、RelScaleTo メソッドを使用します。

第１引数には拡大縮小倍率を、第２引数には何秒かけて拡大縮小するかを指定します。

RelScaleTo メソッドを使用すると前回のアニメーション停止位置のサイズから拡大や縮小をします。

インスタンス.RelScaleTo(拡大縮小倍率, アニメーションの秒数)

以下は拡大ボタンをクリックするとExcel のイメージを２倍のサイズに、縮小ボタンをクリックする0.5倍のサイズに1秒かけて変化するアニメーションを作成する例です。ボタンをクリックするごとに前回のサイズからの拡大縮小を行います。

※１より小さい値（この例では0.5倍を指定していますので小さくなっていくはずなのですが、大きくなっていくことが判明しています。バグとは思われます）

C# の例

private async void myButton_Clicked(object sender, EventArgs e)
{
    await myImage.RelScaleTo(0.5, 1000);
}
private async void myButton2_Clicked(object sender, EventArgs e)
{
    await myImage.RelScaleTo(2, 1000);
}

XAML の例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppSample.MainPage">

    <ScrollView>
        <VerticalStackLayout>
            <HorizontalStackLayout>
                <Button Text="縮小"
                        Clicked="myButton_Clicked"/>
                <Button Text="拡大"
                        Clicked="myButton2_Clicked"/>
            </HorizontalStackLayout>
            <Image x:Name="myImage" Source="excel.png" 
               WidthRequest="128" HeightRequest="128"/>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

相対的に拡大縮小するアニメーションの例