Анимация в .NET MAUI. Основы анимации

Анимация в .NET MAUI позволяет изменять значение свойства элемента управления от одного значения к другому в течение заданного промежутка времени. Наверняка вы встречали такие виды анимации, как затухание, плавное перемещение, вращение элементов управления и т.д. В этом разделе мы рассмотрим основы анимации в .NET MAUI

Базовые анимации в .NET MAUI

Базовые анимации в .NET MAUI создаются с помощью методов расширения VisualElement. Каждая базовая анимация работает с одним свойством, изменяя его от исходного до конечного значения. Так, к базовым анимациям относятся следующие анимации:

Эти методы расширения используют схожие параметры, которые можно описать следующим образом:

public static Task<bool> MethodName(this VisualElement view, property, uint length = 250, Easing? easing = default);

Все методы расширения асинхронные и возвращают true, если анимация была прервана, например, с использованием метода расширения CancelAnimations(). Параметры у метода, представленного выше, следующие:

1. property — анимируемое свойство и его тип (например, double opacity)
2. length — длительность анимации в миллисекундах (по умолчанию — 250)
3. easing — класс, определяющий плавность анимации

Применение базовой анимации

Для применения анимации мы можем использовать какие-либо события элементов управления или задействовать, например, триггеры событий. В качестве примера, создадим новое приложение .NET MAUI и изменим код страницы MainPage.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="MauiApp22.MainPage"
             xmlns:local="clr-namespace:MauiApp22" Appearing="ContentPage_Appearing">

    <ScrollView>
        <VerticalStackLayout x:Name="MainLayout"
            Padding="30,0"
            Spacing="25">
            <Image Opacity="0"
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a hovercraft number nine" />

            <Label Opacity="0"
                Text="Hello, World!"
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" />


            <Label Opacity="0"
                Text="Welcome to &#10;.NET Multi-platform App UI"
                Style="{StaticResource SubHeadline}"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

            <Button Opacity="0"
                x:Name="CounterBtn"
                Text="Click me" 
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill" >
                
            </Button>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Здесь мы для всех элементов управления установили значение свойства Opacity равным нулю. То есть, по умолчанию, все элементы будут прозрачными. Дополнительно мы также задали имя контейнеру компоновки:

<VerticalStackLayout x:Name="MainLayout"

а у станицы определили обработчик события Appearing:

Appearing="ContentPage_Appearing"

который в файле отдельного кода выглядит следующим образом:

private void ContentPage_Appearing(object sender, EventArgs e)
{
    foreach (var child in MainLayout.Children)
    {
        (child as View).FadeTo(1, 4000);
    }
}

Теперь, если запустить приложение, то вы увидите, что все элементы управления на странице плавно появляются одновременно в течение четырех секунд.

При желании, мы можем применить анимацию в триггере событий. Например, перепишем код кнопки следующим образом:

<Button Opacity="0"
    x:Name="CounterBtn"
    Text="Click me" 
    SemanticProperties.Hint="Counts the number of times you click"
    Clicked="OnCounterClicked"
    HorizontalOptions="Fill" >
    <Button.Triggers>
        <EventTrigger Event="Clicked">
            <EventTrigger.Actions>
                <local:FadeInAnimationAction/>
            </EventTrigger.Actions>
        </EventTrigger>
    </Button.Triggers>
</Button>

Здесь мы определили у кнопки триггер события Clicked. Действие триггера будет следующим:

public class FadeInAnimationAction : TriggerAction<Button>
{
    protected override async void Invoke(Button sender)
    {
        sender.Opacity = 1;
        await sender.FadeTo(0,4000);
        await sender.FadeTo(1, 4000);
    }
}

то есть, вначале мы устанавливаем Opacity в значение 1 (полностью непрозрачный элемент), затем запускаем первую анимацию, которая делает полностью прозрачной и только затем — вторую анимацию, которая вернет прозрачность кнопки в исходное состояние.

Составные анимации

Составная анимация — это последовательное сочетание нескольких анимаций.  Составная анимация может быть создана с помощью операторов await. Например, у нас сейчас анимация в триггере — составная:

await sender.FadeTo(0,4000);
await sender.FadeTo(1, 4000);

Также, мы можем создавать составные анимации из ожидаемых и неожидаемых анимаций. Например, изменим код действия триггера следующим образом:

public class FadeInAnimationAction : TriggerAction<Button>
{
    protected override async void Invoke(Button sender)
    {
        sender.Opacity = 1;
        sender.ScaleTo(0.5, 4000);
        await sender.FadeTo(0,4000);
        sender.ScaleTo(1, 4000);
        await sender.FadeTo(1, 4000);
    }
}

Теперь наша составная анимация будет выполняться следующим образом: запустится анимация ScaleTo и одновременно FadeTo и, затем — снова запустится та же пара анимаций, но с изменением свойств в обратном направлении:

Итого

Анимация в .NET MAUI создаются с использованием методов расширения ViewElement и выполняют изменение значения одного свойства от исходного значения к конечному за определенный промежуток времени (по умолчанию — 250 миллисекунд). Из базовых анимаций можно делать составные анимации, используя операторы await для ожидания выполнения анимации или чередуя методы с await и без него для того, чтобы анимации запускались параллельно.