Learn Performing Animation in .NET MAUI: Part 2
Tags: netmaui, mobile, ui, animation
Published: 2023-02-02 12:09:38

---
title: Learn Performing Animation in .NET MAUI: Part 2
published: true
date: 2023-02-02 11:00:00 UTC
tags: netmaui, mobile, ui, animation
canonical_url: https://www.syncfusion.com/blogs/post/animation-in-net-maui-part-2.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msqm0q9jnuaexo25meoq.png
---
Welcome to the second part of our blog on animation in [.NET MAUI](https://docs.microsoft.com/en-us/dotnet/maui/what-is-maui ".NET MAUI")! In [Part 1](https://www.syncfusion.com/blogs/post/learn-performing-animation-in-net-maui-part-1.aspx "Blog: Learn Performing Animation in .NET MAUI: Part 1"), we covered the basics of animation and how to add simple animations to your .NET MAUI application. Now, it’s time to take it to the next level and explore custom animation in .NET MAUI.

Custom animation allows you to create more complex and tailored animations. This blog will teach you how to create custom animations in your .NET MAUI apps.

## Custom animation in .NET MAUI

The .NET Multi-Platform App UI, or .NET MAUI, is a framework for building cross-platform applications using the .NET ecosystem. One of the powerful features of .NET MAUI is the ability to add animations to your app to enhance the user experience and make it more visually appealing.

The **_Animation_** class is the foundation for all .NET MAUI animations. The **_ViewExtensions_** class provides the extension methods for creating one or more animation objects. When creating an animation object, we should specify the number of parameters, including the beginning and end values for the animated property and a callback function to update the property’s value as the animation progresses.

In addition to animating a single property, the **_Animation_** class allows you to create and synchronize child animations. This will enable you to create more complex animations that involve multiple properties and elements within your app.

To run an animation created with the **_Animation_** class, we need to call the **_Commit_** method and specify the duration of the animation. You can also specify a callback function to control whether the animation should repeat, as well as other parameters, such as easing functions, to control the speed and smoothness of the animation.

## Create a custom animation

We will create an animation for a Cody image that appears to be moving and blocked by a brick wall. Cody then thinks and jumps over the wall with a flip. After successfully flipping over the wall, Cody will celebrate a jump before moving away.

We can achieve this animation with several different animation objects. Each one is responsible for animating a specific aspect of the Cody image.

For example, the **_movingLeftAnimation_** object is responsible for animating Cody’s movement from left to right, while the **_rotateJumpAnimation_** object is responsible for animating Cody’s rotation as it jumps over the wall.

Then, we need to add the animation objects to a **_parentAnimation_** object, which controls the overall flow of the animation. The **_parentAnimation_** object specifies the start and end times for each animation object, allowing them to be sequenced together to create the desired animation.

Finally, the **_parentAnimation_** object is committed to the screen using the **_Commit_** method. This method specifies the length of the animation (in our case, it is 10,000 milliseconds) and a flag to indicate that the animation should repeat indefinitely.

Refer to the following code example to initialize the UI.

```xml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CustomAnimation.MainPage">  
    <Grid WidthRequest="700" Margin="10">
         <Image x:Name="imageView"
                  Source="cody.png"
                  HeightRequest="100"
                  HorizontalOptions="Start"
                  VerticalOptions="End"/>
  
         <Image WidthRequest="50"
                Margin="125,0,0,0"
                Source="bricks.png"
                VerticalOptions="End"
                HeightRequest="100"/>
    </Grid> 
</ContentPage>
```

Refer to the following code to create a visually appealing animation of the Cody image that moves and jumps over a brick wall.

```csharp
var parentAnimation = new Animation();
var movingLeftAnimation = new Animation(v => imageView.TranslationX = v, 0, 250);
var movingLeftBackAnimation = new Animation(v => imageView.TranslationX = v, 250, 200);
var movingRightAnimation = new Animation(v => imageView.TranslationX = v, 500, 700);
 
var rotateJumpAnimation = new Animation(v => imageView.Rotation = v, 0, 360);
var movingJumpAnimation = new Animation(v => imageView.TranslationX = v, 200, 500);
var movingJumpUpAnimation = new Animation(v => imageView.TranslationY = v, 0, -200);
var movingJumpDownAnimation = new Animation(v => imageView.TranslationY = v, -200, 0);
       
var jumpUpAnimation = new Animation(v => imageView.TranslationY = v, 0, -30);
var jumpDownAnimation = new Animation(v => imageView.TranslationY = v, -30, 0);
var jumpUpAnimation2 = new Animation(v => imageView.TranslationY = v, 0, -30);
var jumpDownAnimation2 = new Animation(v => imageView.TranslationY = v, -30, 0);
 
parentAnimation.Add(0, 0.15, movingLeftAnimation);
parentAnimation.Add(0.25, 0.35, movingLeftBackAnimation);
 
parentAnimation.Add(0.35, 0.65, rotateJumpAnimation);
parentAnimation.Add(0.35, 0.65, movingJumpAnimation);
parentAnimation.Add(0.35, 0.5, movingJumpUpAnimation);
parentAnimation.Add(0.5, 0.65, movingJumpDownAnimation);
 
parentAnimation.Add(0.7, 0.75, jumpUpAnimation);
parentAnimation.Add(0.75, 0.8, jumpDownAnimation);
parentAnimation.Add(0.8, 0.85, jumpUpAnimation2);
parentAnimation.Add(0.85, 0.9, jumpDownAnimation2);
 
parentAnimation.Add(0.9, 1, movingRightAnimation);
 
parentAnimation.Commit(this, "ChildAnimations", 16, 10000, null, null,repeat:()=>true);
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Creating-a-Custom-Animation-in-.NET-MAUI.gif" alt="Creating a Custom Animation in .NET MAUI" style="width:100%">

  <figcaption>Creating a Custom Animation in .NET MAUI</figcaption>

</figure>

## Custom animation with ViewExtensions class

The **_ViewExtensions_** class in .NET MAUI allows us to animate a property from its current value to the specified value. However, this will be difficult when creating a color-changing animation method that animates a **_color_** property from one value to another, as different controls have different color properties.

To solve this problem, the **_PaintTo_** method can be written with a callback method that passes the interpolated color value back to the caller and takes the start and end color arguments.

Refer to the following code example.

```csharp
public static class ViewExtensions
{
    public static Task<bool> PaintTo(this VisualElement element, Color startColor, Color endColor, Action<Color> callback, uint length = 250, Easing easing = null)
    {
        Func<double, Color> transform = (t) =>
            Color.FromRgba(startColor.Red + t * (endColor.Red - startColor.Red),
                           startColor.Green + t * (endColor.Green - startColor.Green),
                           startColor.Blue + t * (endColor.Blue - startColor.Blue),
                           startColor.Alpha + t * (endColor.Alpha - startColor.Alpha));
        return ChangePaint(element, "ChangePaint", transform, callback, length, easing);
    }
 
    public static void Cancel(this VisualElement self)
    {
        self.AbortAnimation("ColorTo");
    }
 
    static Task<bool> ChangePaint(VisualElement element, string animation, Func<double, Color> transform, Action<Color> callback, uint length, Easing effect)
    {
        effect = effect ?? Easing.Linear;
        var source = new TaskCompletionSource<bool>();
        element.Animate<Color>(animation, transform, callback, 16, length, effect, (v, c) => source.SetResult(c));
        return source.Task;
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Creating-Color-Changing-Custom-Animation-in-.NET-MAUI.gif" alt="Creating Color-Changing Custom Animation in .NET MAUI" style="width:100%">

  <figcaption>Creating Color-Changing Custom Animation in .NET MAUI</figcaption>

</figure>

## Reference

For more details, refer to the [custom animation in the .NET MAUI documentation](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/animation/custom?view=net-maui-7.0 "Documentation: Custom animation in the .NET MAUI").

## Conclusion

Thanks for reading! In this blog, we have seen how to create custom animations in your .NET MAUI applications. With these animations, you can provide a wonderful user experience in your apps!

Syncfusion [.NET MAUI controls](https://www.syncfusion.com/maui-controls ".NET MAUI controls") were built from scratch using .NET MAUI, so they feel like framework controls. They are fine-tuned to work with a vast volume of data. Use them to build your cross-platform mobile and desktop apps!

The Essential Studio for .NET MAUI suite is available from the [License and Downloads](https://www.syncfusion.com/account/login "License and download page of Essential Studio") page. If you are not a Syncfusion customer, you can always download our [free evaluation](https://www.syncfusion.com/downloads/maui "Free evaluation of the Syncfusion Essential Studio") to see all our controls.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/maui "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Introducing the New .NET MAUI Text Input Layout](https://www.syncfusion.com/blogs/post/dotnet-maui-text-input-layout.aspx "Blog: Introducing the New .NET MAUI Text Input Layout")
- [Create Project Planning and Resource Management Calendar in .NET MAUI](https://www.syncfusion.com/blogs/post/create-project-planning-and-resource-management-calendar-in-net-maui.aspx "Blog: Create Project Planning and Resource Management Calendar in .NET MAUI")
- [Introducing the New .NET MAUI Funnel Charts](https://www.syncfusion.com/blogs/post/dotnet-maui-funnel-charts.aspx "Blog: Introducing the New .NET MAUI Funnel Charts")
- [Syncfusion .NET MAUI 2023 Roadmap](https://www.syncfusion.com/blogs/post/syncfusion-net-maui-2023-roadmap.aspx "Blog: Syncfusion .NET MAUI 2023 Roadmap")