Qasim's Blog

Animations Using .NET Maui

All you need to know

Qasim Amin's photo
Qasim Amin
·

4 min read

Animations Using .NET Maui

Visual Studio

.Net Maui

Animations

To make an animation of an item such as a button or an image.

  1.    <VerticalStackLayout
               Spacing="25"
               Padding="30,0"
               VerticalOptions="Center">
                <Image
                   x:Name="Animation"
                   Source="dotnet_bot.png"
                   HeightRequest="200"
                   HorizontalOptions="Center" />
   <Button
                   WidthRequest="200"
                   Text="Animation"
                   Clicked="Animation_Clicked"
                   HorizontalOptions="Center" />
   </VerticalStackLayout>

Have an image or anything you wish to animate, and have one or more buttons like this. Choose what animations you wish to use and display as many buttons as you want. This gives you the freedom to choose how many animations you wish to use. Make sure on your image or object, add an "x:Name" so you can reference your image or object

You should also put the "Clicked" event on your buttons so you can activate its onClicked property, as you can see in the next step.

  1.    private async void Animation_Clicked(object sender, EventArgs e)
       {

       }

Now create this class in your C# file and reference the name to what you called your button on the "Clicked" event.

You have a wide variety of animations to choose from such as - Rotation - Sizing - Fading - so on

I will be showing you 2, sizes and rotation

  1.   private async void Animation_Clicked(object sender, EventArgs e)
       {
          var rotateclockwise = Animation.RotateTo(Animation.Rotation + 90,         1000, Easing.Linear);
           var incrementsize = Animation.ScaleTo(Animation.Scale * 1.50, 1000, Easing.BounceOut);
       }

    You can now add your animations. First, you need to put your animation in a var and name it. In this instance, the variables are rotateclockwise - incrementsize. Then you need to state your object name from the x:Name as explained earlier. After that, you put the Animation function, as shown here is RotateTo or ScaleTo. Then you state the x:Name again and put the function again but in this form, you then add how much you want the image/object to rotate or scale.

In the final result, you should see your image or object scaling and rotating.

Extra

Animations

Fade-In / Fade-Out

For an extra animation, you can see below how to do a fade-in and fade-out animation.

<VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Image
                x:Name="Animation"
                Source="dotnet_bot.png"
                HeightRequest="200"
                HorizontalOptions="Center" />
            <Button
                WidthRequest="200"
                Text="Fade-In"
                Clicked="FadeIn"
                HorizontalOptions="Center" />
             <Button
                WidthRequest="200"
                Text="Fade-Out"
                Clicked="FadeOut"
                HorizontalOptions="Center" />
<VerticalStackLayout />

Like before, you will have an object or image to animate and two buttons for your fade-in and fade-out. Make sure you have a clicked event, and your image needs to have an "x:Name," which is what you are going to be referencing later.

private void FadeIn(object sender, EventArgs e)
    {

    }
private void FadeOut(object sender, EventArgs e)
    {

    }

You will make your class in your c# file and like before, reference your name from your XML file page from the "clicked" event

private void FadeIn(object sender, EventArgs e)
    {
        var fadein = new Animation((value) =>
        {
            Animation.Opacity = value;
        }, 0, 1
        );

        Animation.Animate("Opacity", fadein, length: 1000);
    }

For this code, it will have a bit different coding than the others, but essentially the same concept. Make a variable and create a new animation. Set its value and pass its value on; this is where the magic happens. The animation has a value of either 1 (if it is showing) or 0 (if it is invisible) because you are changing the opacity of the animation. To set its value, you need to go to the line under "Animation. Opacity = value;". Here, you have the flexibility to change whether it is visible or invisible. In this case, we want it to be invisible and then show, fading from out to in. Finally, you set your styles (time, animation name, etc.) at the bottom of the code.

private void FadeOut(object sender, EventArgs e)
    {
        var fadeout = new Animation((value) =>
        {
            Animation.Opacity = value;
        }, 1, 0
       );

        Animation.Animate("Opacity", fadeout, length: 1000);
    }

For the fade-out, it is exactly the same except you are changing whether you want it to be invisible (0) or visible (1). In this case, you can see that we want the object or image to show and then fade out, becoming invisible.

Animation .net maui