Animation With Xamarin.Forms

In this article, I am going to show you how we can add animation to our Xamarin.Forms application. 

It is a very simple process to add animation to Xamarin.Forms app. We are not going to use any third-party plugin for that because this property is available with the default project. We just need to use it and make our app attractive.

So here, I am going to show you 4 basic effects of animation.

• Translate
• Scale
• Rotate
• Fade

These are 4 basic effects which I am going to cover in this article.

Step 1 (Create Project)

First, we need to create a new project. You can use your existing one also.

I am creating a new project in Xamarin.Forms (Blank App).

Step 2 (Create UI )

Now, we need to create Ua I in XAML. As I have already created my UI, please check my following screenshot.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FormsAnimationsApp"
             x:Class="FormsAnimationsApp.FormsAnimationsAppPage">
    <StackLayout Orientation="Vertical" Padding="40" >

    <Label x:Name="lblGret" Text="Hello!!" TextColor="Blue" FontSize="35" IsVisible="false"  />
        <Image x:Name="xamImage" Source="monkey.png" HeightRequest="200" />

        <Label x:Name="lblForms" Text="Xamarin Forms" FontSize="40" TextColor="Purple" HorizontalOptions="CenterAndExpand" />
        <Label x:Name="lblFade" Text ="Animations" FontSize="40" TextColor="Maroon" HorizontalOptions ="CenterAndExpand" />

    </StackLayout>
</ContentPage>

Here, you can see that I am using image and label. So for using the image, we need to add the same image platform-wise because it is Xamarin.Forms. So, the same code will be rendered platform-wise. I have added the same image in “drawable” folder for Android and in “Resources” for iOS.

Step 3 (C# Code)

For writing the C# code, you need to open your xml.cs file and write C# code as I have written in the following screen.

using Xamarin.Forms;
namespace FormsAnimationsApp {
    public partial class FormsAnimationsAppPage: ContentPage {
        public FormsAnimationsAppPage() {
            InitializeComponent();
            lblGret.IsVisible = true;
            //Translate effect
            lblGret.TranslateTo(100, 0, 1000, Easing.BounceOut);
            //Scale
            xamImage.ScaleTo(1.5, 2000, Easing.SpringIn);
            //Rotate
            lblForms.RotateTo(360, 1000);
            //Fade
            lblFade.FadeTo(0.2, 2000, Easing.SpringOut);
        }
    }
}

In this code, you can see that all animation properties are available and we did not add any external plugin.

Easing has more properties for animation. I am showing some property with the following image. 

 

You can see that there are many effects which we can use in our project based on our choice.

Step 4 (BUILD AND DEPLOY)

This is the final step. Now, we need to build this project and deploy it on Emulator or Simulator. The result will look like the following.

 

Conclusion

Making an attractive UI for our app is the most important thing. We can use this property in our Xamarin.Forms App and make our app more attractive.

This is Xamarin.Forms so we don’t need to design again and again. The same code will be rendered based on the selected platform.