DotNet MAUI notes

MAUI Animations

Animations are a core feature of the .NET MAUI, using them can create great user experience by playing motion and transitions to your UI elements. With this, its built in methods can help you animate some of the same properties on a control like scaling, rotation, translation, fading. Additionally, you can compose these animations to create more unusual effects.

Built-in Animation Types Supported by .NET MAUI

.NET MAUI supports several built-in animation types:

  1. Scale Animation: To resize an element.
  2. Rotation Animation: To rotate an element.
  3. Translation Animation: Moves an element along X or Y axis.
  4. Fade Animation: Changing the transparency of one of the element.
  5. Combined Animations: You can combine many animations to get a complex result.

Let’s explore each of these animation types with examples.

Scale Animation (Changing Object Scale)

However, you can use scaling to change the size of an object and get effects such as zoom in or zoom out. That is accomplished using the ScaleTo() method.

<?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="MauiAppExample.MainPage">

    <StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center">
        <Button x:Name="ScaleButton" Text="Scale Me!" Clicked="OnScaleButtonClicked" />
    </StackLayout>
</ContentPage>
namespace MauiAppExample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnScaleButtonClicked(object sender, EventArgs e)
        {
            await ScaleButton.ScaleTo(1.5, 500, Easing.CubicInOut); // Scale to 1.5 times its size over 500ms
            await ScaleButton.ScaleTo(1, 500, Easing.CubicInOut);   // Scale back to original size
        }
    }
}

Rotation Animation (Rotating Objects)

The RotateTo() method allows us to rotate an object. One specifies how many degrees to rotate an element.

<StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center">
    <Button x:Name="RotateButton" Text="Rotate Me!" Clicked="OnRotateButtonClicked" />
</StackLayout>
private async void OnRotateButtonClicked(object sender, EventArgs e)
{
    await RotateButton.RotateTo(360, 1000, Easing.Linear); // Rotate 360 degrees over 1000ms
    RotateButton.Rotation = 0; // Reset rotation angle to allow continuous rotation
}
  • RotateTo(360, 1000): The button will rotate 360 degrees in 1000 milliseconds.
  • Reset Rotation: Then the rotation angle is reset so that the element can be rotated again without noticeable smoothness breaking.

Translation Animation (Moving Objects)

Using TranslateTo() we move an object across the screen. You can tell the object what coordinates to move to.

<StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center">
    <Button x:Name="MoveButton" Text="Move Me!" Clicked="OnMoveButtonClicked" />
</StackLayout>
private async void OnMoveButtonClicked(object sender, EventArgs e)
{
    await MoveButton.TranslateTo(100, 0, 500, Easing.CubicInOut);  // Move to the right by 100 pixels
    await MoveButton.TranslateTo(0, 0, 500, Easing.CubicInOut);    // Move back to original position
}

Fade Animation (Fading Objects)

FadeTo() helps to achieve a fade-in, or a fade-out, of an element setting the opacity.

<StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center">
    <Button x:Name="FadeButton" Text="Fade Me!" Clicked="OnFadeButtonClicked" />
</StackLayout>
private async void OnFadeButtonClicked(object sender, EventArgs e)
{
    await FadeButton.FadeTo(0, 500, Easing.CubicInOut);  // Fade out over 500ms
    await FadeButton.FadeTo(1, 500, Easing.CubicInOut);  // Fade in back to full opacity
}

Combining Animations

This allows you to stack more engaging effects of animation. Take a Task.WhenAll example, namely you can move, rotate and scale your object at the same time.

<StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center">
    <Button x:Name="CombinedButton" Text="Animate Me!" Clicked="OnCombinedButtonClicked" />
</StackLayout>
private async void OnCombinedButtonClicked(object sender, EventArgs e)
{
    await Task.WhenAll(
        CombinedButton.RotateTo(360, 1000, Easing.CubicInOut),   // Rotate 360 degrees over 1000ms
        CombinedButton.ScaleTo(1.5, 1000, Easing.CubicInOut),    // Scale to 1.5 times over 1000ms
        CombinedButton.TranslateTo(100, 0, 1000, Easing.CubicInOut)  // Move right by 100 pixels over 1000ms
    );

    // Reset properties
    await Task.WhenAll(
        CombinedButton.RotateTo(0, 500, Easing.CubicInOut),
        CombinedButton.ScaleTo(1, 500, Easing.CubicInOut),
        CombinedButton.TranslateTo(0, 0, 500, Easing.CubicInOut)
    );
}
  • Task.WhenAll(): Multiple animations are executed in parallel resulting in an effect of a complex nature.
  • The animation consists of rotation, scaling and translation.

Understanding Easing Functions

Easing functions control the rate of change of an animation, making animations feel more natural by providing acceleration or deceleration:

  • Easing.Linear: No acceleration, no deceleration, a constant rate of animation.
  • Easing.CubicIn: It accelerates smoothly since the animation is beginning.
  • Easing.CubicOut: Ends smoothly while decelerating.
  • Easing.CubicInOut: It combines acceleration and deceleration to have a smooth transition.

Creating Custom Animation Sequences

Animation is chainable, meaning you can use it to create animations either by chaining animation methods or in turn using an Animation object. It gives a bit more control over the animations.

private async void OnCustomAnimationClicked(object sender, EventArgs e)
{
    var animation = new Animation(v => CombinedButton.Rotation = v, 0, 360);
    animation.WithConcurrent(v => CombinedButton.Opacity = v, 1, 0.5, Easing.CubicInOut);
    animation.WithConcurrent(v => CombinedButton.Scale = v, 1, 1.2, Easing.CubicInOut);

    animation.Commit(this, "CustomAnimation", length: 1000, easing: Easing.CubicInOut);
}

Animation Class:It is used to creating more flexible and custom animations.

WithConcurrent: It adds some more animations which run at the same time.

maui

, ,