Learn Performing Animation in .NET MAUI: Part 1

#maui #development #mobile #ux

According to Wikipedia, “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) 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 theMicrosoft documentation, “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.

this.fadeInImage.Opacity=0;//Fade inawaitthis.fadeInImage.FadeTo(1,2000);//Fade outawaitthis.fadeInImage.FadeTo(0,2000);

Rotation

Rotate a view using theRotate support. You can usegeneral ,vertical, horizontal , orrelative rotation.

Refer to the following code example.

this.rotateImage.Rotation=0;// General rotationawaitthis.rotateImage.RotateTo(360,2000);// Vertical rotationawaitthis.rotateImage.RotateXTo(360,2000);// Horizontal rotationawaitthis.rotateImage.RotateYTo(360,2000);

Note: We can also rotate horizontally, vertically, and relatively using theRotateXTo ,RotateYTo, andRelRotateTo APIs, respectively.

Scale

We can scale a view using theScale property. There are four types of scaling:vertical ,horizontal ,aspect , andrelative.

Refer to the following code example.

// Zoom inawaitthis.scaleImage.ScaleTo(1,2000);// Zoom outawaitthis.scaleImage.ScaleTo(0,2000);// Horizontal scalingawaitthis.scaleImage.ScaleXTo(1,2000);awaitthis.scaleImage.ScaleXTo(0,2000);// Vertical scalingawaitthis.scaleImage.ScaleYTo(1,2000);awaitthis.scaleImage.ScaleYTo(0,2000);

Note: We can also scale horizontally, vertically, and relatively using theScaleXTo ,SacleYTo, andRelScaleTo APIs, respectively.

Translate

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

// Translate to rightawaitthis.translateImage.TranslateTo(50,0,1000);// Translate to bottomawaitthis.translateImage.TranslateTo(0,50,1000);// Translate to leftawaitthis.translateImage.TranslateTo(-50,0,1000);// Translate to topawaitthis.translateImage.TranslateTo(0,-50,1000);// Diagonal translationawaitthis.translateImage.TranslateTo(50,50,1000);

Note: You can also create these animations witheasing 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.

Step 2: Right-click on the project and selectManage NuGet Packages. Browse forSkiaSharp.Extended.UI.Maui and install the package.

Step 3: Then, open theMauiProgram.cs file and configure theSkiaShap like in the following code.

usingSkiaSharp.Views.Maui.Controls.Hosting;builder.UseSkiaSharp();

Step 4: Go to theMainPage.xaml and add theSkiaSharp namespace. Refer to the following code.

<ContentPagexmlns="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, addSkLottieView with the optionsRepeatCount ,Repeat Mode, andSource.

Note: Refer to theLottieFilesfor a list of JSON files that can be used to add animation to your app. After preparing the JSON file, add it toResource-> RawFolder.

Refer to the following code example.

<skia:SKLottieViewRepeatCount="-1"RepeatMode="Reverse"Source="example.json"WidthRequest="300"HeightRequest="300"/>

.NET MAUI Animations

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 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 theLicense and Downloads page. If you are not yet a Syncfusion customer, you can always download ourfree evaluationto see all our controls in action.

For questions, you can contact us through oursupport forum,support portal, orfeedback portal. We are always happy to assist you!