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.
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 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 Interpolators in action:
- Accelerate Decelerate, Accelerate, Anticipate & Anticipate Overshoot:
- Bounce, Decelerate, Fast Out Linear In & Fast Out Slow In:
- Fast Out Slow In, Linear, Linear Out Slow In & Overshoot
And if you liked these Android visual aids,
you might also enjoy our ImageView.scaleType visual guide.