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

.NET MAUI TIPS.NET MAUI
.NET MAUI TIPS
スポンサーリンク
スポンサーリンク

本記事の概要

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

※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>
相対的に拡大縮小するアニメーションの例

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

スポンサーリンク

.NET MAUI Tips

本サイトでまとめている .NET MAUI Tips の一覧はこちらから確認できます。

Please follow and like us:

コメント

タイトルとURLをコピーしました