[C#/MAUI/.NET6] 사용자 정의 애니메이션 확장 메소드 만들기

TestProject.zip

0.15MB

▶ ViewExtension.cs

namespace TestProject;

/// <summary>
/// 뷰 확장
/// </summary>
public static class ViewExtension
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 색상 변환하기 - ColorTo(element, fromColor, toColor, callbackAction, length, easing)

    /// <summary>
    /// 색상 변환하기
    /// </summary>
    /// <param name="element">엘리먼트</param>
    /// <param name="fromColor">FROM 색상</param>
    /// <param name="toColor">TO 색상</param>
    /// <param name="callbackAction">콜백 액션</param>
    /// <param name="length">길이</param>
    /// <param name="easing">이징 함수</param>
    /// <returns>처리 결과 태스크</returns>
    public static Task<bool> ColorTo(this VisualElement element, Color fromColor, Color toColor, Action<Color> callbackAction, uint length = 250, Easing easing = null)
    {
        Func<double, Color> transformFunction = (t) => Color.FromRgba
        (
            fromColor.Red   + t * (toColor.Red   - fromColor.Red  ),
            fromColor.Green + t * (toColor.Green - fromColor.Green),
            fromColor.Blue  + t * (toColor.Blue  - fromColor.Blue ),
            fromColor.Alpha + t * (toColor.Alpha - fromColor.Alpha)
        );

        return Animate(element, "ColorTo", transformFunction, callbackAction, length, easing);
    }

    #endregion
    #region 애니메이션 취소하기 - CancelAnimation(element)

    /// <summary>
    /// 애니메이션 취소하기
    /// </summary>
    /// <param name="element">엘리먼트</param>
    public static void CancelAnimation(this VisualElement element)
    {
        element.AbortAnimation("ColorTo");
    }

    #endregion

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

    #region 애니메이션 만들기 - Animate(element, name, transformFunction, callbackAction, length, easing)

    /// <summary>
    /// 애니메이션 만들기
    /// </summary>
    /// <param name="element">엘리먼트</param>
    /// <param name="name">명칭</param>
    /// <param name="transformFunction">변환 함수</param>
    /// <param name="callbackAction">콜백 액션</param>
    /// <param name="length">길이</param>
    /// <param name="easing">이징 함수</param>
    /// <returns>처리 결과 태스크</returns>
    private static Task<bool> Animate(VisualElement element, string name, Func<double, Color> transformFunction, Action<Color> callbackAction, uint length, Easing easing)
    {
        easing = easing ?? Easing.Linear;

        TaskCompletionSource<bool> taskCompletionSource = new TaskCompletionSource<bool>();

        element.Animate<Color>(name, transformFunction, callbackAction, 16, length, easing, (v, c) => taskCompletionSource.SetResult(c));

        return taskCompletionSource.Task;
    }

    #endregion
}

 

728x90

 

▶ 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">
    <Grid x:Name="grid"
        Margin="10"
        RowDefinitions="*,Auto">
        <Image x:Name="image" Grid.Row="0"
            WidthRequest="250"
            HeightRequest="310"
            Source="dotnet_bot.png" />
        <Button x:Name="animationButton" Grid.Row="1"
            Margin="0,10,0,0"
            Text="애니메이션" />
    </Grid>
</ContentPage>

 

300x250

 

▶ MainPage.xaml.cs

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        this.animationButton.Clicked += animationButton_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 애니메이션 버튼 클릭시 처리하기 - fadeInButton_Clicked(sender, e)

    /// <summary>
    /// 애니메이션 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void animationButton_Clicked(object sender, EventArgs e)
    {
        await this.grid.ColorTo(Color.FromRgb(0, 0, 0), Color.FromRgb(255, 255, 255), c => this.grid.BackgroundColor = c, 5000);
    }

    #endregion
}