Learn Performing Animation in .NET MAUI: Part 1
Tags: maui, development, mobile, ux
Published: 2022-08-26 12:47:47

---
title: Learn Performing Animation in .NET MAUI: Part 1
published: true
date: 2022-08-26 10:30:05 UTC
tags: maui, development, mobile, ux
canonical_url: https://www.syncfusion.com/blogs/post/learn-performing-animation-in-net-maui-part-1.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5ktr9afo7s7nwihvuoe.png
---
According to Wikipedia, “[Animation](https://en.wikipedia.org/wiki/Animation "Wikipedia link to Animation") is a method in which figures are manipulated to appear as moving objects.” Animation in an app is essential to provide an appealing UI and better responsiveness. A cross-platform application like a [.NET Multi-platform App UI (.NET MAUI)](https://docs.microsoft.com/en-us/dotnet/maui/what-is-maui "Microsoft documentation on .NET Multi-platform App UI") app also needs animation to make it more attractive.

Two kinds of animation can be applied in .NET MAUI:

- Basic animations
- Lottie animations

In this blog, let’s take a quick look at these animation methods.

## .NET MAUI basic animation

As stated in the [Microsoft documentation](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/animation/basic "Microsoft documentation on .NET MAUI Basic Animation"), “The .NET Multi-platform App UI (.NET MAUI) animation classes target different properties of visual elements, with a typical basic animation progressively changing a property from one value to another over a period of time.”

### Built-in animations

There are four basic built-in animations available in .NET MAUI:

- Fade
- Rotation
- Scale
- Translate

####  Fade

Fade animation can fade in and fade out a view by changing the opacity. Refer to the following code example.

```csharp
this.fadeInImage.Opacity = 0;

//Fade in
await this.fadeInImage.FadeTo(1, 2000);

//Fade out
await this.fadeInImage.FadeTo(0, 2000);
```

#### Rotation

Rotate a view using the **Rotate** support. You can use **general** , **vertical, horizontal** , or **relative** rotation **.**

Refer to the following code example.

```csharp
this.rotateImage.Rotation = 0;

// General rotation
await this.rotateImage.RotateTo(360, 2000);

// Vertical rotation
await this.rotateImage.RotateXTo(360 , 2000);

// Horizontal rotation
await this.rotateImage.RotateYTo(360, 2000);
```

**Note:** We can also rotate horizontally, vertically, and relatively using the **RotateXTo** , **RotateYTo,** and **RelRotateTo** APIs, respectively.

#### Scale

We can scale a view using the **Scale** property. There are four types of scaling: **vertical** , **horizontal** , **aspect** , and **relative.**

Refer to the following code example.

```csharp
// Zoom in
await this.scaleImage.ScaleTo(1, 2000);

// Zoom out
await this.scaleImage.ScaleTo(0, 2000);

// Horizontal scaling
await this.scaleImage.ScaleXTo(1, 2000);
await this.scaleImage.ScaleXTo(0, 2000);

// Vertical scaling
await this.scaleImage.ScaleYTo(1, 2000);
await this.scaleImage.ScaleYTo(0, 2000);
```

**Note:** We can also scale horizontally, vertically, and relatively using the **ScaleXTo** , **SacleYTo,** and **RelScaleTo** APIs, respectively.

### Translate

We can translate a view to another location with an animation. Refer to the following code example.

```csharp
// Translate to right
await this.translateImage.TranslateTo(50, 0, 1000);

// Translate to bottom
await this.translateImage.TranslateTo(0, 50, 1000);

// Translate to left
await this.translateImage.TranslateTo(-50, 0, 1000);

// Translate to top
await this.translateImage.TranslateTo(0, -50, 1000);

// Diagonal translation
await this.translateImage.TranslateTo(50, 50, 1000);
```

**Note:** You can also create these animations with [easing functions](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/animation/easing "Microsof documentation on easing functions").

## Lottie animation

Lottie animations are free, open-source packages that can be used in your .NET MAUI apps. They animate elements using a JSON file that contains the content for the animation. There are a lot of options available in Lottie animation.

Follow these steps to add Lottie animation to a .NET MAUI application.

**Step 1:** First, create a [.NET MAUI application](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android "Build your first .NET MAUI app").

**Step 2:** Right-click on the project and select **Manage NuGet Packages**. Browse for **SkiaSharp.Extended.UI.Maui** and install the package.

**Step 3:** Then, open the **MauiProgram.cs** file and configure the **SkiaShap** like in the following code.

```csharp
using SkiaSharp.Views.Maui.Controls.Hosting;
builder.UseSkiaSharp();
```

**Step 4:** Go to the **MainPage.xaml** and add the **SkiaSharp** namespace. Refer to the following code.

```xml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
             x:Class="MAUIAnimations.MainPage">
```

**Step 5:** Finally, add **SkLottieView** with the options **RepeatCount** , **Repeat Mode,** and **Source**.

**Note:** Refer to the [LottieFiles](https://lottiefiles.com/ "LottieFiles")for a list of JSON files that can be used to add animation to your app. After preparing the JSON file, add it to **Resource-> Raw**  **Folder**.

Refer to the following code example.

```xml
<skia:SKLottieView RepeatCount="-1"
                   RepeatMode="Reverse"
                   Source="example.json"
                   WidthRequest="300"
                   HeightRequest="300"/>
```
<figure>
<img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/MAUI-Animation.gif" alt=".NET MAUI Animations" style="width:100%">

  <figcaption>.NET MAUI Animations</figcaption>

</figure>
## Conclusion

Thanks for reading! I hope you are now aware of how to add animations to your .NET MAUI application. In part two of this blog, we’ll look at custom animation in .NET MAUI!

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

For current customers, the new Essential Studio version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can always download our [free evaluation ](https://www.syncfusion.com/downloads/maui/confirm "Free evaluation of the Syncfusion Essential Studio")to see all our controls in action.

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/xamarin-forms "Syncfusion feedback portal"). We are always happy to assist you!

## Related blogs

- [Add Busy Notifications to Your .NET MAUI Application](https://www.syncfusion.com/blogs/post/add-busy-notifications-to-your-net-maui-application.aspx "Blog: Add Busy Notifications to Your .NET MAUI Application")
- [What’s New in .NET MAUI: 2022 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-in-net-maui-2022-volume-2.aspx "Blog: What’s New in .NET MAUI: 2022 Volume 2")
- [Easy Steps to Create an Investment (SIP) Calculator in .NET MAUI](https://www.syncfusion.com/blogs/post/easy-steps-to-create-an-investment-sip-calculator-in-net-maui.aspx "Blog: Easy Steps to Create an Investment (SIP) Calculator in .NET MAUI")
- [Page Navigation in .NET MAUI: An Overview](https://www.syncfusion.com/blogs/post/page-navigation-in-net-maui-an-overview.aspx "Blog: Page Navigation in .NET MAUI: An Overview")