Easing Functions

Controlling velocity changes in animations

PDF for offline use
Sample Code:
Related Articles:
Related APIs:

Let us know how you feel about this


0/250

last updated: 2016-07

Xamarin.Forms includes an Easing class that allows you to specify a transfer function that controls how animations speed up or slow down as they're running. This article demonstrates how to consume the pre-defined easing functions, and how to create custom easing functions.

Overview

The Easing class defines a number of easing functions that can be consumed by animations:

  • The BounceIn easing function bounces the animation at the beginning.
  • The BounceOut easing function bounces the animation at the end.
  • The CubicIn easing function slowly accelerates the animation.
  • The CubicInOut easing function accelerates the animation at the beginning, and decelerates the animation at the end.
  • The CubicOut easing function quickly decelerates the animation.
  • The Linear easing function uses a constant velocity, and is the default easing function.
  • The SinIn easing function smoothly accelerates the animation.
  • The SinInOut easing function smoothly accelerates the animation at the beginning, and smoothly decelerates the animation at the end.
  • The SinOut easing function smoothly decelerates the animation.
  • The SpringIn easing function causes the animation to very quickly accelerate towards the end.
  • The SpringOut easing function causes the animation to quickly decelerate towards the end.

The In and Out suffixes indicate if the effect provided by the easing function is noticeable at the beginning of the animation, at the end, or both.

In addition, custom easing functions can be created. For more information, see Custom Easing Functions.

Consuming an Easing Function

The animation extension methods in the ViewExtensions class allow an easing function to be specified as the final method parameter, as demonstrated in the following code example:

await image.TranslateTo(0, 200, 2000, Easing.BounceIn);
await image.ScaleTo(2, 2000, Easing.CubicIn);
await image.RotateTo(360, 2000, Easing.SinInOut);
await image.ScaleTo(1, 2000, Easing.CubicOut);
await image.TranslateTo(0, -200, 2000, Easing.BounceOut);

By specifying an easing function for an animation, the animation velocity becomes non-linear and produces the effect provided by the easing function. Omitting an easing function when creating an animation causes the animation to use the default Linear easing function, which produces a linear velocity.

For more information about using the animation extension methods in the ViewExtensions class, see Simple Animations. Easing functions can also be consumed by the Animation class. For more information, see Custom Animations.

Custom Easing Functions

There are three main approaches to creating a custom easing function:

  1. Create a method that takes a double argument, and returns a double result.
  2. Create a Func<double, double>.
  3. Specify the easing function as the argument to the Easing constructor.

In all three cases, the custom easing function should return 0 for an argument of 0, and 1 for an argument of 1. However, any value can be returned between the argument values of 0 and 1. Each approach will now be discussed in turn.

Custom Easing Method

A custom easing function can be defined as a method that takes a double argument, and returns a double result, as demonstrated in the following code example:

await image.TranslateTo(0, 200, 2000, CustomEase);

double CustomEase (double t)
{
  return t == 0 || t == 1 ? t : (int)(5 * t) / 5.0;
}

The CustomEase method truncates the incoming value to the values 0, 0.2, 0.4, 0.6, 0.8, and 1. Therefore, the Image instance is translated in discrete jumps, rather than smoothly.

Custom Easing Func

A custom easing function can also be defined as a Func<double, double>, as demonstrated in the following code example:

Func<double, double> CustomEase = t => 9 * t * t * t - 13.5 * t * t + 5.5 * t;
await image.TranslateTo(0, 200, 2000, CustomEase));

The CustomEase Func represents an easing function that starts off fast, slows down and reverses course, and then reverses course again to accelerate quickly towards the end. Therefore, while the overall movement of the Image instance is downwards, it also temporarily reverses course halfway through the animation.

Custom Easing Constructor

A custom easing function can also be defined as the argument to the Easing constructor, as demonstrated in the following code example:

await image.TranslateTo (0, 200, 2000, new Easing (t => 1 - Math.Cos (10 * Math.PI * t) * Math.Exp (-5 * t)));

The custom easing function is specified as a lambda function argument to the Easing constructor, and uses the Math.Cos method to create a slow drop effect that's dampened by the Math.Exp method. Therefore, the Image instance is translated so that it appears to drop to its final resting place.

Summary

This article demonstrated how to consume the pre-defined easing functions, and how to create custom easing functions. Xamarin.Forms includes an Easing class that allows you to specify a transfer function that controls how animations speed up or slow down as they're running.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.