Simple Animation in Xamarin.Forms

In this article I will give a brief introduction in simple animations which you can easily use within your Xamarin.Forms application. But first of all let’s talk about the question why we should use animation in our app. Sometimes an app needs some time to get all the necessary data which should be shown on a page, but this will take maybe a little bit due to a limited internet connection or parsing large json files. In this case it would be perfect to show some kind of loading animation. For sure there is the ActivityIndicator class on Xamarin.Forms, but this is a little bit boring. This is only one example when to use animations within your app.

Get Started

Everything you need is already included in the Xamarin.Forms nuget package which is already part of your Xamarin.Forms app.

On each view control you have now access via extension methods on some animation helpers. The main methods are:

• TranslateTo — moves the control on x and/or y axis
• ScaleTo — scales the control to make it bigger or smaller
• RotateTo — rotates the control
• FadeTo — fades the control in or out

Example

Now I want to show you how you can easily use the animation APIs within your Xamarin.Forms app.

The following code snippets shows the following scenario: I want to move the image (called SampleImage) first 100px to the right within 1 second. After this I will move the image back to the origin and 100px to the left. Finally I move it back to the starting position.

The fourth parameter on each function is an easing function to control the speed of the animation.

Each API works the same, so the following code snippet shows how to rotate the image of an angle of 180 degrees and also back to the starting position.

Sample App

I’ve created a sample app to demonstrate all four animation types. This app is available on Android, iOS and also UWP.

The following animation shows the app in action.

The source code of the app is available on GitHub. Please feel free to take a deeper look.

Conclusion

With the provided APIs it is easily possible to animation each control. As the sample app shows the result works on all platforms. So you can easily for example create your own loading indicator or animate the controls within your app to create a beautiful user experience.