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.

Follow the author

23 Comments

  1. browndoll

    so thankyou

    Reply
  2. Kudl

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

    Reply
  3. Filip

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

    Reply
  4. anyone

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

    Reply
  5. Sorin Irimies

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

    Reply
  6. Roger

    thank you very much!

    Reply
  7. Dexter

    Excelent !!!!!!!

    Reply
  8. Roney Gomes

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

    Reply
  9. Paolo

    Very nice tutorial! Thank you man!

    Reply
  10. lugrugzo

    Thanks for detailed document.

    Have a great day.

    Reply
  11. kumar

    NIce article it is good for learning

    Reply
  12. kent

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

    Reply
  13. Kevin

    perfect guide, Thanks

    Reply
  14. Ali

    Great article

    Reply
  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);

    Reply
  16. how to get free apps on android

    hi this amazing writing and presentation for all visitor, i hope it will be continue i have seen a good news Liberated to win

    apple iPhone, any kind of cell phone as well as apple iPhone 6 smart phone, best iphone apps and you will sign up for the

    application new world
    You are able to win just about all essential apple iPhone 6 application as well as software program as well as video games

    out of this hyperlink how to get free apps on android

    Reply
  17. Vlad

    Thank you for all the details. Very good explanation.

    Reply
  18. Tomasz

    Thank you ! BEST article in all internet !

    Reply
  19. Leonid

    Cool article. Theory is a must to know!
    Also consider this:
    ipfx.org – you can create any interpolator functions in the online editor
    and embed them in android app:
    example project:
    https://github.com/dsidex/ipfx.org-examples-android

    Reply
  20. Ed

    Very helpful! Thank you!

    Reply
  21. Android Example

    Hi dude, i have also find out one good example
    Frame By Frame Animation | 2D Animation – Android Example.

    Reply
  22. MJK

    Thanks man. This is awesome.

    Reply
  23. Lautaro

    very useful

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>