---
title: 'Android Interpolators: A Visual Guide'
teaser: An app for visualizing Android's various Interpolators.
tags: android,design,news,open source,mobile,kotlin
author: Amanda Hill
published_on: 2017-02-16
---

<style type="text/css">
li img {
  width: 300px;
}
</style>

If you like pina coladas 🍹, and getting caught in the rain 🌧, _AND_ you can't
remember the difference between each of the various `Interpolator` subclasses,
then this blog post is for YOU 👈🏼!

Animations -- motion, interactions and transitions -- are all a critical
component of material design. They help to make the user experience feel more
natural and fluid. But designing and implementing the perfect animation can be a
cumbersome and timely process. Luckily, the Android SDK does a lot to help us
along - with things like [`ViewPropertyAnimator`] and [`Transitions`], but often
times simply remembering all that is available can feel like half the battle.

## Say 👋 to interpolator

Well folks, today I am here to help - introducing [interpolator] - an open
sourced app - with all the `Interpolator` subclasses visualized on one screen.

![](https://images.thoughtbot.com/blog-vellum-image-uploads/zaMpr1HeQCeTCVzZINI9_phone.png)

Each interpolator is applied to an identical pink dot in a vertical list. All
of the dots have the exact same animation set on them except, of course, for
their interpolator. As you can see in the screenshot above, the dots are all
labeled with their respective `Interpolator` class name so you can easily see
which one is which without having to look at the code. As an added bonus, each
of the dots is draggable, so you can easily compare and contrast the effects of
two different interpolators side by side.

Check out the [code](https://github.com/thoughtbot/interpolator) to download
the app today!

## Movers and Shakers and GIFs 👯

But in case you're in a hurry or you just want to see some pretty animations,
right this second, here are all of the various `Interpolator`s in action:

* [Accelerate Decelerate], [Accelerate], [Anticipate] & [Anticipate Overshoot]:
  ![][uno]
* [Bounce], [Decelerate], [Fast Out Linear In] & [Fast Out Slow In]:
  ![][dos]
* [Fast Out Slow In], [Linear], [Linear Out Slow In] & [Overshoot]
  ![][tre]

[Accelerate Decelerate]:https://developer.android.com/reference/android/view/animation/AccelerateDecelerateInterpolator.html
[Accelerate]:https://developer.android.com/reference/android/view/animation/AccelerateInterpolator.html
[Anticipate]:https://developer.android.com/reference/android/view/animation/AnticipateInterpolator.html
[Anticipate Overshoot]:https://developer.android.com/reference/android/view/animation/AnticipateOvershootInterpolator.html
[Bounce]:https://developer.android.com/reference/android/view/animation/BounceInterpolator.html
[Decelerate]:https://developer.android.com/reference/android/view/animation/DecelerateInterpolator.html
[Fast Out Linear In]:https://developer.android.com/reference/android/support/v4/view/animation/FastOutLinearInInterpolator.html
[Fast Out Slow In]:https://developer.android.com/reference/android/support/v4/view/animation/FastOutSlowInInterpolator.html
[Linear]:https://developer.android.com/reference/android/view/animation/LinearInterpolator.html
[Linear Out Slow In]:https://developer.android.com/reference/android/support/v4/view/animation/LinearOutSlowInInterpolator.html
[Overshoot]:https://developer.android.com/reference/android/view/animation/OvershootInterpolator.html

And if you liked these Android visual aids,
you might also enjoy [our `ImageView.scaleType` visual guide][guide].

[`Transitions`]: https://developer.android.com/reference/android/transition/package-summary.html
[`ViewPropertyAnimator`]: https://developer.android.com/reference/android/view/ViewPropertyAnimator.html
[dos]: https://images.thoughtbot.com/blog-vellum-image-uploads/u8rydN7FSCWDAKImIdaw_two.gif
[guide]: https://thoughtbot.com/blog/android-imageview-scaletype-a-visual-guide
[interpolator]: https://github.com/thoughtbot/interpolator
[tre]: https://images.thoughtbot.com/blog-vellum-image-uploads/iDU8PJCRDihLBK0LJrGs_three.gif
[uno]: https://images.thoughtbot.com/blog-vellum-image-uploads/7fIV4YhSLy8CvZtX7Fwo_one.gif