A case where AccelerateInterpolator is not just nice to have

I always thought the Interpolator feature on Animation is just something nice to have i.e. mainly for beautifying the animation smoothness and has no direct “business” matter e.g. indicating the sequence of event etc, until I see this case. Let me illustrate how I’m converted.

My goal

Below is a scenario where I plan to change my No Data View to a view of 3 data list. Since the fetching of the 3 data is obtained at the same time, I could literally show them all at once quickly.

As part making a polished transition, without feeling sudden “jump” of view, we decide to use some fading animation.

Cross Fading Entire View

So the first thing that come to my mind is to use cross fading (i.e. Fade-in of left view and Fade-out of right view at the same time). We use a View Flipper that add both views and cross fade them. Below is the result

As you could see above, even though the cross fade is at the same time for 3-cards view into the layout, there’s an illusion that the first card come in slower than the other two. This is because the first card, have an initial No Data View at the background that cross fade out, while the other 2 cards don’t have. Hence making the first card clear visibility becomes slower and giving an illusion that it comes out slower.

Cross Fading Card by Card

Well, perhaps we could simply cross fade card by card. I decide not do delay the existence of each card since they are all there, but just prolong the duration of each card fade in linearly in order of the card relative to other. The code (in Kotlin) is as below

containerView.addView(view, containerView.childCount)val animation 
= android.view.animation.AnimationUtils
.loadAnimation(context, android.R.anim.fade_in)
animation.duration = 250 * containerView.childCount.toLong()view.startAnimation(animate)

The above code ensure each card has a longer 250ms duration than it’s previous card. So let’s see how this goes as below.

I think it slightly improve, but just not enough. The first card still seems slower than the second card somehow. It’s just not perfect.

The first thought is prolong the duration different across cards. This is not ideal as it would prolong the entire process as animating as well.

I also almost consider using other animation such such slide-in, as I tested and it looks much better and clearer. But this would then look too “fancy” for a business App.

So, as per the title, AccelerateInterpolator came to the rescue.

AccelerateInterpolated Cross Fading Card by Card

So I added AccelerateInterpolator (with a value of 1.5f) to the Animation as Bold in the Kotlin code below

containerView.addView(view, containerView.childCount)val animation 
= android.view.animation.AnimationUtils
.loadAnimation(context, android.R.anim.fade_in)
animation.duration = 250 * containerView.childCount.toLong()
animation.interpolator = AccelerateInterpolator(1.5f)
view.startAnimation(animate)

Check out the result below. It looks much more noticeable that the second card comes after first and so forth.

There’s no longer feeling of the first card fade-in is delayed. The designer is happy with this result, and I’m happy. AccelerateInterpolator is indeed needed in this scenario to clearly show the flow and not just nice to have.

There are other interpolator e.g. AccelerateDecelerateInterpolator that might make it better further, where the fade in slow down at the end perhaps. I didn’t experiment, as to me I have achieved the needed goal, and don’t want to try on nice-to-have item. Tell me if you find something better.

Written by

Passionate about learning, and sharing mobile development and others https://twitter.com/elye_project https://www.facebook.com/elye.proj

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store