Xamarin.Forms includes its own animation infrastructure that allows for easy creation of simple animations, while also being versatile enough to create complex animations. Let’s take a look how we can reproduce some popular animations with Xamarin.Forms built-in infrastructure.

The first animation that I want to reproduce is the nice entry shaking animation on the macOS X lock screen when you enter an incorrect password.

Shake Animation

The following code example demonstrates the TranslateTo method to reproduce the shake animation:

uint timeout = 50;
await MyEntry.TranslateTo(-15, 0, timeout);
await MyEntry.TranslateTo(15, 0, timeout);
await MyEntry.TranslateTo(-10, 0, timeout);
await MyEntry.TranslateTo(10, 0, timeout);
await MyEntry.TranslateTo(-5, 0, timeout);
await MyEntry.TranslateTo(5, 0, timeout);
MyEntry.TranslationX = 0;

Lets take a look what we get with this code. The following video shows shaking on each platform:

Flip Animation

Another often used animation is the flip animation. During it we can replace images, colors or even controls. We can achieve this with 3 steps:

1. Rotate the control to 90 (-90 for Right to Left) degrees so it the width becomes zero pixels
2. Replace it with the other control previously rotated to 270 (-270)
3. Rotate the new control to 360 (-360) and setup the rotation to 0.

I will flip one button replacing it with another button with a different background color.  To reproduce the flip animation we will use RotateYTo method:

Here we go

GreenButton.RotationY = -270;
await RedButton.RotateYTo(-90, timeout);
RedButton.IsVisible = false;
GreenButton.IsVisible = true;
await GreenButton.RotateYTo(-360, timeout);
GreenButton.RotationY = 0;

Let’s take a look at what we got

 
Nice, but to me it looks very “linear”. That’s because we have skipped the additional parameter called “easing function”. Omitting the third parameter when creating an animation causes the animation to use the default Linear easing function, which produces a linear velocity. Let’s make it more fancy with smooth accelerations. For this we will pass the easing functions: Easing.SpringIn and Easing.SpringOut.

await RedButton.RotateYTo(-90, timeout, Easing.SpringIn);
await GreenButton.RotateYTo(-360, timeout, Easing.SpringOut);

Let’s take a look what we got now after minor changes:

Collapse/Expand animation

The last example that I want to show you is the Collapse/Expand animation that is often used in different types of accordion controls. Let’s take a look how we can achieve this with LayoutTo function. We will collapse the control’s height (Y-axis) but you can easily collapse the width (X-axis).

//collapse
MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 0), 500, Easing.CubicIn)
//expand
MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 300), 500, Easing.CubicOut)

Let’s take a look at our results

As you possibly have noticed we also got the “Arrow” rotating  and running simultaneously. This is called Composite Animations. Composite animations can be created by mixing awaited and non-awaited animations and using the Task.WhenAny and Task.WhenAll methods to run multiple asynchronous methods concurrently.

//expand
await Task.WhenAll(new List<Task> {MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 300), 500, Easing.CubicOut), MyButton.RotateTo(180, 500, Easing.SpringOut)});
//Collapse
await Task.WhenAll(new List<Task>{MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 0), 500, Easing.CubicIn),MyButton.RotateTo(360, 500, Easing.SpringOut)});

Wrapping Up

The examples in the blog demonstrate how easily with a few lines of code we can get nice smooth hardware-accelerated animations on 3 major platforms. Sample animations source code is available on github.