Android Hopping Animation

WHY?

If you ever see what the Android onboarding hop animation looks like, it’s an amusing welcome animation for the new user whom first time launches the phone. Here’s an example of that. Let’s see the result first.

Animation example

HOW?

The basic idea here is that we use an animator to let the container keep changing its position. In the meantime, we would need to update the background color for different positions.
Check this gist here: Android Onboarding Pop Animation · GitHub

Let’s do one shut.

1
2
3
4
5
6
7
8
9
10
11
12

val animation = bottomContainer
    .animate()
    .translationYBy(-40f)
    .alpha(0.9f)
    .setDuration(400)

animation.withEndAction {
    bottomContainer
        .animate()
        .alpha(0.5f)
        .translationYBy(40f).duration = 400
}

Let’s quickly go through the code example. I lift the container from the original position to higher position -40f, at the same time, I also update the background alpha from 0.5f to 0.9f.

It is a simple one time hopping. What if you want to do infinitely hopping animation? On Android, there are many methods to let you keep trigger the functions. For example,

• Android Handler: Through the Handler function, you can trigger the function by sending events.
• RxJava/RxAndroid: It’s probably the most popular library on the Android platform, which provides the publisher feature for event triggering.

I choose the Android Handler to get the infinitely bouncing animation done. Check my gist here: GitHub - wangchauyan/AndroidHopAnimation: Animation just like Android Onboarding Hopping Animation

Enjoy the animation, happy coding.

[Reference]

1. Boucing Animation