Understanding Interpolators in Android

In the journey of learning animations in Android, all of us wonder what interpolators are and how do we use them.

I tried reading Android documentation to understand it but that didn’t help much. Then I decided to play 👾 around with each default interpolator by applying them on animating a view in the fixed direction (translation).

From Left to Right Moving Cube

While observing 👀 the difference in animation behaviour due to the interpolators, I simultaneously read their code implementation to get an idea about how an interpolator defines the rate of change of an animation.

String is a sequence of characters. In the same manner, Animation is a sequence of still images (also known as frames) moving in a time interval.

🕐 🕑 🕒 🕓 🕔 🕕 🕖 🕗 🕘 🕙 🕚 🕛 🕐

With each instance of time, there is a one to one mapping of a frame. These frames are little different from each other, moving in series creating animation effect (like translate, scale, rotate, alpha).

An Interpolator comes into the picture between animation time interval to help change the mapping of a frame to time instance.

It replaces the frame for a particular time instance with another frame. The replacement frame can be from past, present or future time instance depending upon the type of interpolator used for animation.

An interpolator is a mathematical tool that takes original time instances as an input, performs operation based on its mathematical equation and provides output as a time instance of a replacement frame for that given input instance.

For simplicity, let’s take an example of Linear Interpolator.

Linear Interpolator Applied on Translating Cube

It’s mathematical equation is:

f(x) = x

Graph is:

Here, X-axis is original animation time interval transformed into 0.0 (start) to 1.0 (end) points. And Y-axis is time instance of a replacement frame.

The graph clearly shows that with no change in input, output remains unchanged and animations remain unaffected ↔️.

But what if we modify the linear equation and create our own custom linear Interpolator by adding some fractional constant to given input to see changes in animation.

Custom Linear Interpolator Applied on Translating Cube

It’s mathematical equation will be like:

f(x) = x + 0.1

Graph is:

Here, X-axis is original animation time interval transformed into 0.0 (start) to 1.0 (end) points. And Y-axis is time instance of a replacement frame.

Now it starts animating ahead of original state and finishes ahead of the final state 😯 because the interpolator function produces time instance frames.

Let’s take another interpolator, a bit complex mathematical equation say Accelerate Interpolator.

It makes the rate of change of frames from slow 🚶 to fast 🏃 with the certain acceleration.

Accelerate Interpolator Applied on Translating Cube

It’s mathematical equation is:

f(x) = x²

Graph is:

Here, X-axis is original animation time interval transformed into 0.0 (start) to 1.0 (end) points. And Y-axis is time instance of a replacement frame.

From the plot, we can observe that each adjacent point difference increases 📈 with time. Therefore, it shows acceleration type of behavior.

Now we are ready to make own custom interpolator as desired 😎. I have tried simulating the Spring effect using interpolator ツ

Custom Swing Interpolator Applied on Translating Cube

It’s mathematical equation is:

Graph is:

Here, X-axis is original animation time interval transformed into 0.0 (start) to 1.0 (end) points. And Y-axis is time instance of a replacement frame.

I hope you have learned something new by reading this article🤗.

I have also created a playground 🎮 of interpolators. Which showcases how different animations are affected by different interpolators. It also includes graphs and equations to each interpolator 📦 and will help understanding other interpolators like Anticipate, Overshoot, Bounce, Cycle.

In case you want to check out the code, here is Github repo link.

geetgobindsingh/AndroidAnimationInterpolator

Thanks for reading 😊 this article. Feel free to provide feedback 👍🏻 in comments section below and don’t forget to give a clap 👏🏻 🤓

Also, Let’s become friends on Twitter, Facebook, Linkedin, and Github.