Xamarin.Forms’ pre-defined animations allow you to translate, rotate, scale and fade visual elements. For any other needs, e.g. like color transitions, you can define custom animations.
Let’s start with a button centered on the page.
var button = new Button {
Text = "Animate!",
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
};
Its Command contains a delegate which calls Animate, a method for starting a custom animation. We leave the optional name empty and define the animation to take half a second or 500 milliseconds to complete. The second and most important argument is a function depending on a variable x ranging from 0 to 1. The method body contains TextColor and Scale modifications given x: The color will be blue at the beginning and red after half a second, when x becomes 1. The scale grows from 1 to 3. You can also specify the step size with another optional argument.
button.Command = new Command(() => button.Animate("", x => {
button.TextColor = Color.FromRgb(x, 0, 1 - x);
button.Scale = 1 + 2 * x;
}, length: 500));
Finally, we add the button to the Content of the MainPage.
MainPage = new ContentPage { Content = button };