[C#/MAUI/.NET6] 페이지 시작시 애니메이션 사용하기

■ 페이지 시작시 애니메이션을 만드는 방법을 보여준다.

▶ AppShell.xaml


<?xml version = "1.0" encoding = "UTF-8" ?>
<Application x:Class="TestProject.App"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" />

<?xml version = "1.0" encoding = "UTF-8" ?>

<Application x:Class="TestProject.App"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" />

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Shell.NavBarIsVisible="False"
    Shell.TabBarIsVisible="False">
    <Grid BackgroundColor="White">
        <Grid>
            <Frame x:Name="circleFrame1"
                Margin="-110,30,0,0"
                HorizontalOptions="Start"
                WidthRequest="400"
                HeightRequest="400"
                CornerRadius="200"
                Opacity="0.7"
                BackgroundColor="RoyalBlue" />
            <Frame x:Name="rectangleFrame"
                Margin="-50,0,0,0"
                HorizontalOptions="End"
                VerticalOptions="End"
                WidthRequest="280"
                HeightRequest="270"
                CornerRadius="0"
                Opacity="0.6"
                BackgroundColor="White" />
            <Frame x:Name="circleFrame2"
                Margin="0,0,-250,-230"
                HorizontalOptions="End"
                VerticalOptions="End"
                WidthRequest="450"
                HeightRequest="400"
                CornerRadius="200"
                Opacity="0.6"
                BackgroundColor="RoyalBlue" />
        </Grid>
        <Grid RowDefinitions="Auto,*,150">
            <Label Grid.Row="0"
                Margin="20"
                FontSize="Large"
                FontAttributes="Bold"
                Text="icodebroker" />
            <StackLayout Grid.Row="1"
                VerticalOptions="Center">
                <Label
                    Margin="10"
                    LineHeight="1"
                    FontAttributes="Bold,Italic"
                    FontFamily="Arial"
                    FontSize="50"
                    Text="Visit&#10;the icodebroker&#10;blog." />
                <Label
                    Margin="10"
                    LineHeight="1"
                    FontFamily="Arial"
                    FontSize="Body"
                    Text="Enter&#10;https://icodebroker.tistory.com&#10;in your web browser." />
                <Image
                    Margin="10,0"
                    HorizontalOptions="Start"
                    Source="arrow.png">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer x:Name="tapGestureRecognizer"
                            NumberOfTapsRequired="1" />
                    </Image.GestureRecognizers>
                </Image>
            </StackLayout>
        </Grid>
    </Grid>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Shell.NavBarIsVisible="False"

Shell.TabBarIsVisible="False">

<Grid>

<Frame x:Name="circleFrame1"

Margin="-110,30,0,0"

HorizontalOptions="Start"

WidthRequest="400"

HeightRequest="400"

CornerRadius="200"

Opacity="0.7"

BackgroundColor="RoyalBlue" />

<Frame x:Name="rectangleFrame"

Margin="-50,0,0,0"

HorizontalOptions="End"

VerticalOptions="End"

WidthRequest="280"

HeightRequest="270"

CornerRadius="0"

Opacity="0.6"

BackgroundColor="White" />

<Frame x:Name="circleFrame2"

Margin="0,0,-250,-230"

HorizontalOptions="End"

VerticalOptions="End"

WidthRequest="450"

HeightRequest="400"

CornerRadius="200"

Opacity="0.6"

BackgroundColor="RoyalBlue" />

</Grid>

<Label Grid.Row="0"

Margin="20"

FontSize="Large"

FontAttributes="Bold"

Text="icodebroker" />

<StackLayout Grid.Row="1"

VerticalOptions="Center">

<Label

Margin="10"

LineHeight="1"

FontAttributes="Bold,Italic"

FontFamily="Arial"

FontSize="50"

Text="Visit
the icodebroker
blog." />

<Label

Margin="10"

LineHeight="1"

FontFamily="Arial"

FontSize="Body"

Text="Enter
https://icodebroker.tistory.com
in your web browser." />

<Image

Margin="10,0"

HorizontalOptions="Start"

Source="arrow.png">

<Image.GestureRecognizers>

<TapGestureRecognizer x:Name="tapGestureRecognizer"

NumberOfTapsRequired="1" />

</Image.GestureRecognizers>

</Image>

</StackLayout>

</Grid>

</ContentPage>

▶ MainPage.xaml.cs


namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public partial class MainPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPage()
    {
        InitializeComponent();

        this.tapGestureRecognizer.Tapped += tapGestureRecognizer_Tapped;

        this.rectangleFrame.IsVisible = false;
        this.circleFrame2.IsVisible   = false;

        StartAnimationAsync();
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private
    //////////////////////////////////////////////////////////////////////////////// Event

    #region 탭 제스처 인식기 탭 처리하기 - tapGestureRecognizer_Tapped(sender, e)

    /// <summary>
    /// 탭 제스처 인식기 탭 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void tapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
        await Task.WhenAll
        (
            this.rectangleFrame.FadeTo(0, 300, Easing.SinOut),
            this.circleFrame2.FadeTo(0, 300, Easing.SinOut)
        );

        await Task.WhenAll
        (
            this.circleFrame1.FadeTo(0, 1000, Easing.SinIn),
            this.circleFrame1.ScaleTo(10, 1000, Easing.SinOut)
        );

        await Navigation.PushAsync(new MainPage());
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////// Function

    #region 애니메이션 시작하기 (비동기) - StartAnimationAsync()

    /// <summary>
    /// 애니메이션 시작하기 (비동기)
    /// </summary>
    private async void StartAnimationAsync()
    {
        await Task.WhenAll
        (
            this.circleFrame1.ScaleTo(10, 0),
            this.circleFrame1.FadeTo(0, 0)
        );

        await Task.WhenAll
        (
            this.circleFrame1.ScaleTo(1, 1000, Easing.SinIn),
            this.circleFrame1.FadeTo(0.7, 1000, Easing.SinOut)
        );

        this.rectangleFrame.IsVisible = true;
        this.circleFrame2.IsVisible   = true;

        await Task.WhenAll
        (
            this.rectangleFrame.FadeTo(0.7, 300, Easing.SinIn),
            this.circleFrame2.FadeTo(0.7, 300, Easing.SinIn)
        );
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.tapGestureRecognizer.Tapped += tapGestureRecognizer_Tapped;

this.rectangleFrame.IsVisible = false;

this.circleFrame2.IsVisible = false;

StartAnimationAsync();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region 탭 제스처 인식기 탭 처리하기 - tapGestureRecognizer_Tapped(sender, e)

/// <summary>

/// 탭 제스처 인식기 탭 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private async void tapGestureRecognizer_Tapped(object sender, EventArgs e)

{

await Task.WhenAll

(

this.rectangleFrame.FadeTo(0, 300, Easing.SinOut),

this.circleFrame2.FadeTo(0, 300, Easing.SinOut)

);

await Task.WhenAll

(

this.circleFrame1.FadeTo(0, 1000, Easing.SinIn),

this.circleFrame1.ScaleTo(10, 1000, Easing.SinOut)

);

await Navigation.PushAsync(new MainPage());

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 애니메이션 시작하기 (비동기) - StartAnimationAsync()

/// <summary>

/// 애니메이션 시작하기 (비동기)

/// </summary>

private async void StartAnimationAsync()

{

await Task.WhenAll

(

this.circleFrame1.ScaleTo(10, 0),

this.circleFrame1.FadeTo(0, 0)

);

await Task.WhenAll

(

this.circleFrame1.ScaleTo(1, 1000, Easing.SinIn),

this.circleFrame1.FadeTo(0.7, 1000, Easing.SinOut)

);

this.rectangleFrame.IsVisible = true;

this.circleFrame2.IsVisible = true;

await Task.WhenAll

(

this.rectangleFrame.FadeTo(0.7, 300, Easing.SinIn),

this.circleFrame2.FadeTo(0.7, 300, Easing.SinIn)

);

}

#endregion

}

TestProject.zip

.NET6 2D ANIMATION C# CONTROL GRAPHICS MAUI MICROSOFT