# Android Animations Tutorial 5: More on Interpolators

Today I will show you how to customise and even create your own interpolators. As discussed previously, the View Animation system provides a number of ready made interpolators. But sometimes you have your own requirements and you just want that interpolator that behaves slightly different. You are able to customise the existing interpolators and even create your own interpolators from scratch. At the end of this post I will create a new interpolator called the HesitateInterpolator. The HesitateInterpolator will start at full speed but will then slow down half way before accelerating again towards the end. But before I come to that I will talk a bit about the theory and show you how to customise the existing interpolators.

### A Bit of Theory

To implement an interpolator we must first understand what an interpolator actually does. The animation system plays an animation between a start time and end end time. Every frame of the animation, therefore, is displayed at a specific time between the start and end. This time index is converted to the time index, a float number between 0.0 and 1.0. Here 0.0 means the start of the animation and 1.0 means the end of the animation. In the simplest case, the value is then taken to calculate the transformation of the object. In the case of a transformation, 0.0 corresponds to the start position, 1.0 to the end position and 0.5 to halfway between the start and the end. This is exactly what the linear interpolator does. After 30% of the time the view will have moved 30% of the way.

In general the time index does not have to be taken directly to calculate the value of the translation. We can transform the time index which runs from 0.0 to 1.0 into another number that can also run from 0.0 to 1.0 but does not change in a uniform way. This is exactly what an interpolator does.

A time interpolator is essentially a mathematical function that takes a number between 0.0 and 1.0 and transforms it into another number. As an example the figure shows the graph of the accelerate interpolator. The view starts with zero velocity and then accelerates as it moves towards the end position. By default the mathematical function that the accelerate interpolator uses is

$y=t^2$

Here $$y$$ is the output of the interpolator and $$t$$ is the time index. The accelerate interpolator can be custimsed using a parameter. In general the function that the accelerate interpolator uses is given by

$y= t^{2f}$

The number $$f$$ is a factor specifying how emphasised the acceleration should be. A larger value of $$f$$ means that the view starts slower and then accelerates more quickly to the end. An $$f$$ value of 1 on the other hand results in the same behaviour as the linear interpolator.

### Customizing Interpolators

Many interpolators can be customised using XML resource files or programmatically. To customise an interpolator using XML resources you have to create a new XML file in the res/anim directory. Let’s say that you want to modify the accelerate interpolator and we want to set the factor $$f$$ to 2. We create a new file called res/anim/my_accelerate_interpolator.xml.

<?xml version="1.0" encoding="utf-8"?>
<accelerateInterpolator
xmlns:android="http://schemas.android.com/apk/res/android"
android:factor="2" />

Note how the tag that specifies the interpolator is the class name of the interpolator but with the first letter written in lowercase. Once this file has been created you can use the custom accelerate interpolator simply by referencing

@anim/my_accelerate_interpolator

in your animation resource. For example a scale animation could use it in the following way.

<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/my_accelerate_interpolator"
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:duration="300" />

### Overview of Interpolators

#### Linear Interpolator

Class: LinearInterpolator
Resource id: @android:anim/linear_interpolator
Tag: linearInterpolator
Formula: $$y=t$$
Class Constructor: public LinearInterpolator()
Attributes: none

The output of the LinearInterpolator as a function of time.

#### Accelerate Interpolator

Class: AccelerateInterpolator
Resource id: @android:anim/accelerate_interpolator
Tag: accelerateInterpolator
Formula: $$y=t^{2f}$$
Class Constructor: public AccelerateInterpolator(float factor)
Parameters:
Name: $$f$$
Attribute: android:factor
Description: The emphasis of the acceleration.
A larger value causes a slower initial motion and a
faster acceleration towards the end.

The output of the AccelerateInterpolator as a function of time. Curves are shown for different values of the factor.

#### Decelerate Interpolator

Class: DecelerateInterpolator
Resource id: @android:anim/decelerate_interpolator
Tag: decelerateInterpolator
Formula: $$y=1 – (1 – t)^{2f}$$
Class Constructor: public DecelerateInterpolator(float factor)
Parameters:
Name: $$f$$
Attribute: android:factor
Description: The emphasis of the deceleration.
A larger value causes a faster initial deceleration and a
slower motion towards the end.

The output of the DecelerateInterpolator as a function of time. Curves are shown for different values of the factor.

#### Accelerate Decelerate Interpolator

Class: AccelerateDecelerateInterpolator
Resource id: @android:anim/accelerate_decelerate_interpolator
Tag: accelerateDecelerateInterpolator
Formula: $$y=\cos((t+1)\pi) / 2 + 0.5$$
Class Constructor: public AccelerateDecelerateInterpolator()
Parameters:none

The output of the AccelerateDecelerateInterpolator as a function of time.

#### Anticipate Interpolator

Class: AnticipateInterpolator
Resource id: @android:anim/anticipate_interpolator
Tag: anticipateInterpolator
Formula: $$y=(T+1) \times t^3 – T \times t^2$$
Class Constructor: public AnticipateInterpolator(float tension)
Parameters:
Name: $$T$$
Attribute: android:tension
Description: The amount of tension, the default is 2.
A larger tension will make the initial excursion smaller and quicker.

The output of the AnticipateInterpolator as a function of time. Curves are shown for different values of the tension.

#### Overshoot Interpolator

Class: OvershootInterpolator
Resource id: @android:anim/overshoot_interpolator
Tag: overshootInterpolator
Formula: $$y=(T+1) \times (t-1)^3 + T \times (t-1)^2+1$$
Class Constructor: public OvershootInterpolator (float tension)
Parameters:
Name: $$T$$
Attribute: android:tension
Description: The amount of tension, the default is 2.
A larger tension will make the overshoot smaller and quicker.

The output of the OvershootInterpolator as a function of time. Curves are shown for different values of the tension.

#### Anticipate Overshoot Interpolator

Class: AnticipateOvershootInterpolator
Resource id: @android:anim/anticipate_overshoot_interpolator
Tag: anticipateOvershootInterpolator
Formula: $$y=\begin{cases} 0.5\left((T+1) \times (2t)^3 – T \times (2t)^2\right) & \text{for } t < 0.5\\ 0.5\left((T+1) \times (2t-2)^3 + T \times (2t-2)^2\right)+1 & \text{for } t \ge 0.5 \end{cases}$$
Class Constructors:
public AnticipateOvershootInterpolator(float tension)
public AnticipateOvershootInterpolator(float tension, float extraTension)
Parameters:
Attribute: android:tension
Description: The amount of tension, the default is 2.
A larger tension will make the overshoot smaller and quicker.

Attribute: android:extraTension
Description: Extra amount of tension, the default is 1.5.

The value of $$T$$ is simply tension*extraTension

The output of the AnticipateOvershootInterpolator as a function of time. Curves are shown for different values of the total tension.

#### Bounce Interpolator

Class: BounceInterpolator
Resource id: @android:anim/bounce_interpolator
Tag: bounceInterpolator
Formula: $$y=\begin{cases} 8\times(1.1226t)^2 & \text{for } t < 0.31489\\ 8\times(1.1226t – 0.54719)^2+0.7 & \text{for } 0.31489 ≤ t < 0.65990\\ 8\times(1.1226t – 0.8526)^2+0.9 & \text{for } 0.65990 ≤ t < 0.85908\\ 8\times(1.1226t – 1.0435)^2+0.95 & \text{for } 0.85908 ≤ t \end{cases}$$
Class Constructor: public BounceInterpolator ()
Parameters: none

The output of the BounceInterpolator as a function of time.

#### Cycle Interpolator

Class: CycleInterpolator
Resource id: @android:anim/cycle_interpolator
Tag: cycleInterpolator
Formula: $$y=\sin(2\pi\times C \times t)$$
Class Constructor: public CycleInterpolator(float cycles)
Parameters:
Name: $$C$$
Attribute: android:cycles
Description: The number of cycles, the default is 1.

The output of the CycleInterpolator as a function of time. Curves are shown for different numbers of cycles.

### Creating New Interpolators

The output of the HesitateInterpolator as a function of time.

Now, as promised, here is a little tutorial on how to create your very own interpolator. As discussed above an interpolator is, in essence, a simple mathematical function. To create a new interpolator class you just have to implement the Interpolator interface. The Interpolator interface defines a single method float getInterpolation(float t) which calculates the function. As an example I want to create a HesitateInterpolator which starts at full velocity, then slows down half way before accelerating again towards the end. The curve is plotted in the figure on the right and the functional dependence is
$y = 0.5\times((2t-1)^3+1)$
The code for the HesitateInterpolatorclass is then simply

public class HesitateInterpolator implements Interpolator {
public HesitateInterpolator() {}
public float getInterpolation(float t) {
float x=2.0f*t-1.0f;
return 0.5f*(x*x*x + 1.0f);
}
}

In order to use the interpolator you just have to programmatically add it to your view animation. For example

ScaleAnimation scale = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f);
scale.setInterpolator(new HesitateInterpolator());

That’s it! There is nothing more to it.

Unfortunately you can’t use the interpolator in your XML resource of the animation and it is only available programmatically.

1. browndoll

so thankyou

2. Kudl

Thanks a lot! The best article about interpolator in android that I ever seen!

3. Filip

Excellent article! Helped me understand Interpolators and was able to explain it in my Dissertation!

4. anyone

Thanks man!
i Was looking for an article like this for a long time!

5. Sorin Irimies

Excellent article. I finally understand how this works. Thx alot.

6. thank you very much!

7. Dexter

Excelent !!!!!!!

8. Roney Gomes

Nice article Mikail, thanks for taking the time to write it.

9. Paolo

Very nice tutorial! Thank you man!

10. lugrugzo

Thanks for detailed document.

Have a great day.

11. kumar

NIce article it is good for learning

12. kent

For the graphic of Overshoot Interpolator. Does the T of green line is 4?

13. Kevin

perfect guide, Thanks

14. Ali

Great article

15. Quang

I try but it not run. pls help me
TranslateAnimation move = new TranslateAnimation(0,600,0,600);
move.setDuration(3000);
move.setInterpolator(new Inter());
image.startAnimation(move);