In this section, we will take a look at how to work with Simple Animations in your Xamarin.Forms XAML and ContentPages using C#. The Xamarin.Forms platform includes its own animation classes that are straightforward to use to create simple animations, as well as being versatile enough to provide you with the ability of creating more complex animations.
Simple Animations make use of the ViewExtensions class, which provides you with extension methods that can be used to construct simple animations. The ViewExtensions class provides you with a LayoutTo extension method, which is only intended for use with layouts to animate transitions between layout states that contain size and property changes, and should only be used by classes that use the Layout subclass.
Before we start working with Simple Animations in our XAML and ContentPages (Views), let's take a moment to look at the various extension methods provided to us by the ViewExtensions class, which are explained in the following table:
| Extension method | Description |
| TranslateTo | This is responsible for animating the TranslationX and TranslationY properties of a given visual element that has been defined in your XAML page. |
| ScaleTo | This is responsible for animating the Scale property of a given visual element that has been defined in your XAML page. |
| RelScaleTo | This is responsible for applying an incremental animated increase or decrease to the Scale property of a given visual element that has been defined in your XAML page. |
| RotateTo | This is responsible for animating the Rotation property of a given visual element that has been defined in your XAML page. |
| RelRotateTo | This applies an incremental animated increase or decrease to the Rotation property of a given visual element that has been defined in your XAML page. |
| RotateXTo | This is responsible for animating around the RotationX property of a given visual element that has been defined in your XAML page. |
| RotateYTo | This is responsible for animating around the RotationY property of a given visual element that has been defined in your XAML page. |
| FadeTo | This is responsible for animating the Opacity property of a given visual element that has been defined in your XAML page. |
As you can see in the preceding table, the ViewExtensions class contains a variety of extension methods, as well as including a CancelAnimations method that can be used to cancel animations at any point in time.
Whenever you use these extension methods, they will contain an animation property, which by default has been set to 250 milliseconds. However, you can change the duration of each animation whenever you create the animation, using any of the extension methods. When working with the animation property, the extension methods in the ViewExtensions class are all asynchronous method calls, and these return a Task<bool> object. Whenever the animation completes, it will return a value of false and if the animation is cancelled, it will return a value of true.
Therefore, whenever you define your animation class methods, you should always specify the await operator, which will help make it possible to determine whenever your animation completes, and then you can handle it accordingly. Now that you have an understanding of what Simple Animations are, as well as the various extension methods available to you through the ViewExtensions class, our next step is to begin implementing some Simple Animations.