When adding custom animations to your Xamarin Applications don’t immediately jump to the custom renderers and platform specific code, it is not needed. Often overlooked the Xamarin.Forms Animation APIs can usually handle your mobile apps animation needs. The APIs are built right into the platform so you can be confident your code will work across the platforms your application is being built for.
The Docs
The Xamarin.Forms Animations docs outline all the APIs that you can use.
TranslateToScaleToRelScaleToRotateToRelRotateToRotateXToRotateYToFadeTo
Moving items around on the screen should be easy and with a little knowledge of how to structure your pages you can start adding special effects to your apps. Let’s focus on simple Translation Animations.
Translation
When building an app that requires animations you may need to create your view entirely in C# instead of XAML. However, for most simple animation sequences you can still use XAML which is what we are going to do here.
Consider you standard starter MainPage.xaml in a new Xamarin.Forms project.
1
2
3
4
5
6
7
8
9
10
11
<?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:XamarinAnimations"
x:Class="XamarinAnimations.MainPage">
<StackLayout Grid.Row="0">
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
Let’s now add a square BoxView to the view and give it a name. We need to give the BoxView a name so it can be accessed in the code behind.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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:XamarinAnimations"
x:Class="XamarinAnimations.MainPage">
<StackLayout Grid.Row="0">
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
<BoxView HeightRequest="75"
WidthRequest="75"
HorizontalOptions="Start"
VerticalOptions="Start"
BackgroundColor="Black" />
</StackLayout>
</ContentPage>
Launch your application to make sure everything works and it should look something like this screenshot.
Update the BoxView to have a name, so it can be accessed from the code behind.
1
2
3
4
5
6
<BoxView x:Name="boxView"
HeightRequest="75"
WidthRequest="75"
HorizontalOptions="Start"
VerticalOptions="Start"
BackgroundColor="Black" />
Add a GestureRecognizer which allows us to perform an action after an event has occurred.
1
2
3
4
5
6
7
8
9
10
<BoxView x:Name="boxView"
HeightRequest="75"
WidthRequest="75"
HorizontalOptions="Start"
VerticalOptions="Start"
BackgroundColor="Black">
<BoxView.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</BoxView.GestureRecognizers>
</BoxView>
Final XAML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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:XamarinAnimations"
x:Class="XamarinAnimations.MainPage">
<StackLayout Grid.Row="0">
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
<BoxView x:Name="boxView"
HeightRequest="75"
WidthRequest="75"
HorizontalOptions="Start"
VerticalOptions="Start"
BackgroundColor="Black">
<BoxView.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</BoxView.GestureRecognizers>
</BoxView>
</StackLayout>
</ContentPage>
Code Behind
Now that the XAML is all configured correctly you need to add a new method to the code behind to perform the actual animation. Open up the MainPage.xaml.cs and add the following event handler method.
1
2
3
4
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
boxView.TranslationY -= 25;
}
Go ahead and run your application and tap on the BoxView it will jump up the screen 25 points at a time.
Smooth Translation
The original attempt at control translations worked, but since the translation was performing point to point translation it doesn’t look very good. When building translations in our apps we need to have a smooth translate routine that moves the item across the screen until it gets to the final location.
When I was a Game Developer and even in Windows Desktop we had to write our update logic that would handle each frame update as we moved it across the screen. This is no longer the case as the platform handles all of this for us if we use the correct API
Let’s update our code behind to use TranslateTo instead of TranslationX. As part of this I have updated the translation amount to 100 so the change is more apparant on the screen.
1
2
3
4
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
boxView.TranslateTo(0, boxView.TranslationY - 100);
}
Your output should look like the screen below:
Slow and Smooth
The completed code may be running way to fast for your project and slowing down the Translation is easy enough to add. The API method we are using TranslateTo has a default value for length which is the time the animation takes in milliseconds.
Update your code as follows:
1
2
3
4
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
boxView.TranslateTo(0, boxView.TranslationY - 100, 2000);
}
Now the animation will run much slower, which demonstrates that this API handles updating each frame until it gets to the final translation point.
Code Sample
All of the code presented here is available for you to download try out on your own machine. Take a look at the Xamarin Animations project we have started which will be your go to source for all Xamarin Animation examples in our blog series.
What’s Next? This is just an intro to Xamarin Animations API and we are working on several follow up articles such as Scaling, Rotation, etc. As we add more blogs we will update this article so you can easily find the other articles.
Happy Coding