Android interpolator animation

Interpolate means to alter or intercept or insert in between two things or events. An interpolator in android animation is to insert or apply an additional animation effects between the start and the end value of the property of an object that is being animated. For example, you created an animation definition in the xml file to make an new activity to slide in from the bottom of the screen. The animation is to go from 100% y value to 0% y value. Now, you want to add an bounce effect to the animation, so the activity slides in from the bottom and reached to the top, then bounces before it settle down. This bounce is an interpolator which is availble out of box from the Android framework. Here is an example for the slide in from bottom aniamtion with bounces.
in_from_bottom_bounce.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/bounce_interpolator" >
    <translate android:fromYDelta="100%"
        android:toYDelta="0" android:duration="1500"/>
</set>

To apply this to an activity, just add this line in the onCreate method of the acitivy.

overridePendingTransition(R.anim.in_from_bottom_bounce, 0);

There are 9 interpolators available out of box from the Android sdk. They are accelerate_interpolator, decelerate_interpolator, accelerate_decelerate_interpolator, anticipate_interpolator, overshoot_interpolator, anticipate_overshoot_interpolator, linear_interpolator, bounce_interpolator and cycle_interpolator. To use one of them, for example apply the overshoot_interpolator in an animation set defined in a xml file, you just add this to the set property android:interpolator="@android:anim/overshoot_interpolator"

The following are examples of using each of those 9 interpolators in a xml file in the res/anim folder, apply to an aimation of moving a view horizontally from 0% x to 80% x. To use them, define the animation in a xml file in res/anim folder. For example, you defined the animation in interpolator_accelerate.xml, and you want to apply the animation to an ImageView in your activity, only these two lines of code are needed.

Animation animAccelerateDecelerate = AnimationUtils.loadAnimation(this, R.anim.interpolator_accelerate);
anImageView.startAnimation(animAccelerateDecelerate);

interpolator_accelerate.xml
The accelerate interpolator accelerates the moving of the view, it starts out slowly and then accelerates until it reaches the final position.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="80%"
        android:duration="1000"/>
</set>

interpolator_decelerate.xml
The decelerate interpolator does the opposite of the accelerate interpolator. It starts out fast and the slows down.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="80%"
        android:duration="1000"/>
</set>

interpolator_accelerate_decelerate.xml
The accelerate decelerate interpolator makes the moving go slow at the beginning and the end, but fast in the middle.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="80%"
        android:duration="1000"/>
</set>

interpolator_anticipate.xml
The anticipate interpolator moves the animation backwards before it starts. For example, the animation is to make an object to go from x position 0 to 10, it will move the object backwards to maybe x position -5 and then starts the regular animation from 0 to 10.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/anticipate_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="80%"
        android:duration="1000"/>
</set>

interpolator_overshoot.xml
The overshoot interpolator does the opposite of the anticipate interpolator. It make the animation to go further than the defined destintion, and then get back to the defined destination.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/overshoot_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="80%"
        android:duration="1000"/>
</set>

interpolator_anticipate_overshoot.xml
The anticipate overshoot interpolator combines the anticipate and the overshoot interpoplator.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/anticipate_overshoot_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="80%"
        android:duration="1000"/>
</set>

interpolator_linear.xml
The linear interpolator is the default interpolator of all animations, which means the rate of the change of the animation is constant.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="80%"
        android:duration="1000"/>
</set>

interpolator_bounce.xml
The bounce interpolator makes an bounce animation before the desired animation ends.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/bounce_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="80%"
        android:duration="1000"/>
</set>

interpolator_cycle.xml
The cycle interpolator repeats the animation for a specified number of cycles.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/cycle_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="80%"
        android:duration="1000"/>
</set>

The interpolator can also be set to an Animation object in Java code using the setInterpolator method of the Animation class.

Animation anim = AnimationUtils.loadAnimation(this, R.anim.slide_in_bottom);
anim.setInterpolator(new BounceInterpolator());
// OR
anim.setInterpolator(context, android.R.anim.bounce_interpolator);

Complete example in Github

Search within Codexpedia

Custom Search

Search the entire web

Custom Search