Анимация в .NET MAUI. Плавность и скорость анимации

В .NET MAUI мы можем добавлять к анимации различные эффекты и регулировать скорость её выполнения. По умолчанию анимация выполняется линейно, то есть за равные промежутки времени свойство меняется на одно и то же значение. Скорость анимации регулируется параметром length в методе анимации и по умолчанию составляет 250 миллисекунд.

Класс Easing

Класс Easing предоставляет нам ряд функций с помощью которых мы можем изменять скорость и плавность выполнения анимации:

Функция	Эффект от использования	График изменения значения свойства
BounceIn	Создает эффект отскока в начале анимации
BounceOut	Создает эффект отскока в конце анимации
CubicIn	Плавно ускоряет анимацию в начале, используя кубическую функцию
CubicInOut	Ускоряет анимацию вначале и замедляет в конце
CubicOut	Уменьшает скорость анимации в конце
Linear	Анимация выполняется с линейной скоростью (используется по умолчанию)
SinIn	Изменяет скорость анимации в начале по синусоиде
SinInOut	Использует формулу синуса для ускорения анимации в начале и замедления в конце
SinOut	Использует формулу синуса для уменьшения скорости анимации в конце
SpringIn	Создает эффект ускорения анимации в конце
SpringOut	Создает эффект замедления анимации в конце

Чтобы продемонстрировать как работают эти функции, создадим новое приложение .NET MAUI и добавим атрибут x:Name к картинке на странице MainPage (анимировать будем картинку):

<Image x:Name="picture"
    Source="dotnet_bot.png"
    HeightRequest="185"
    Aspect="AspectFit"
    SemanticProperties.Description="dot net bot in a hovercraft number nine" />

Теперь перейдем в файл отдельного кода MainPage.xaml.cs и изменим обработчик Clicked для кнопки следующим образом:

private void OnCounterClicked(object sender, EventArgs e)
{
    picture.RelRotateTo(360, 3000, Easing.SpringOut);
}

В третьем параметре метода анимации мы передаем необходимую нам функцию Easing. Запустим приложение и проверим как будет работать теперь анимация поворота картинки на 360 градусов:

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

Итого

Анимации в .NET MAUI можно изменять, дополняя метод анимации третьим параметров, в котором передается функция Easing с помощью которой можно ускорять/замедляя анимацию в начале или в конце, а так же создавать эффект отскока или возврата назад при выполнении анимации.