Splash Screen Using Physics Animation

As a developer I always try to decode the logics behind any particular feature of live Android applications and redesign them according to my logic. You can check out my previous try to demonstrate the animation of cars in Uber android app attached below.

amanjeetsingh150/UberCarAnimation

Yesterday I came across this splash screen of ShowBox App which is nice app for streaming movies and TV shows:

Show Box Splash Screen

After seeing this I decided to re-engineer this screen according to my logic. I broke this animation in following parts:

1. A rotation which is driven by a force about (0,0) of the screen.
2. Translate that screen downwards

In this article I will cover how I achieved this animation and made the following demo:

Show Box Splash Demonstration

Thanks to Google for introducing the Physics Based Animation in Google I/O 2017, which helped me to cover the first part that is rotation powered by a force.

What is Physics Based Animation and how are they different from rest?

Till now developers have animation APIs like Value Animators, Object Animators where we apply different interpolators which control the rate of change of animation for these animations. They all lack in one thing that is they all are somewhere static which every time ends up in a complex code when we have to deal with complex animations which should act like real world objects. And we all are like:

Ohhh my code!!

Now comes the PHYSICS ANIMATION:

Google made these animations to give more realistic experiences for their users. These animations are included in support library so that it is backward compatible till API 16. These type of animations are powered and assisted by a force which controls the progress of animations. You will define the characteristics of these forces and it guards all the animation value on its own.

Apply physics like a boss

In order to get start with these animation, add the physics-based support library to your build.gradle file:

compile "com.android.support:support-dynamic-animation:25.4.0"

Now you do not need to define any duration or any other values. Your defined Force will take care of animations itself.

This Physics based animation API provided two types of Animations:

1. Spring Animation: These animations are driven by a spring force where all the velocities of your animation will be dependent on the spring force. You will define all the properties of the spring force including damping ratio and stiffness. APIs have provided different type of constants to set them easily.

Spring animation

2. Fling Animations: Animation of view property is driven by frictional force. Fling animation has an initial momentum and gradually slows down. It obeys the laws of friction that is the frictional force is proportional to the object’s velocity and thus gradually slowing down the object.

In this article I will cover the Spring Animation from which I actually achieved the splash screen . Enough talk lets go to code.

1. Creating a spring Force and applying it to the SpringAnimation

Setting up the spring force and initializing spring animation

• In this part of code we are initializing a Spring Force with constructor value which defines its equilibrium position in float.
• We define a pivot for the layout of the activity which is relative in my case. It will be (0,0) because we want rotation of layout about origin
• Start Defining the SpringAnimation which will takes following parameters:

1. View on which you want to apply the spring animation.
2. Second is DynamicAnimation which will tell you which property of view we have to animate which is Rotation in our case.

Now, thanks to Kotlin for giving us apply keyword which provide us a block and help us to define the properties of Spring Force in it. In this I have used Damping ratio as DAMPING_RATIO_HIGH_BOUNCY and stiffness as STIFFNESS_VERY_LOW. DAMPING_RATIO_HIGH_BOUNCY will ensure higher oscillations and stiffness when equal to STIFFNESS_VERY_LOW would cause object to slowly come back in its original position.

• Now at last we will tell our spring animation to adapts the spring properties from the spring force we made and set a start value for the animation

2. Setting up DynamicAnimation.OnAnimationEndListener

Now we have described that the layout should rotate about (0,0) with given stiffness and damping ratio and now we need to translate our layout downwards after the spring animation ends. For this purpose our API has provided us with following two Listeners:

• OnAnimationUpdateListener: This listener overrides method onAnimationUpdate which is used to receive the changes in the property of the view on the progress of animation.
• OnAnimationEndListener: This listener overrides method onAnimationEnd which is used to notify the end of the animation it is registered to.

In our application as we want to start the translation after the spring animation ends so we register a OnAnimationEndListener , which will override onAnimationEnd. Then after the animation ends we will translate our layout in next step.

End Listener setup

3. Translation layout after end is notified and opening the second activity

Now in OnAnimationEnd we will use ViewPropertyAnimator which is one more class in android available for performing animations related to property of the views with just few lines of code.

Lets go step by step:

• First we get our default display metrics to get our screen width height and width so that we can translate it.
• With the relative layout instance we call animate( ) which will return our object’s appropriate ViewPropertyAnimator reference so that we can start our property animations.
• After calling animate, we called setStartDelay( ) which sets a delay before starting animation, then we set a translation on both X and Y axis according to the respective width and height we got in the display metrics.
• After setting these animation we also added a listener to this ViewPropertyAnimator in which when we receive the OnAnimationEnd callback we will start the second activity.

PS: Don’t forget to add overridePendingTransition(0, 0) after your startActivity( ) call which tells our Window Manager to disable its default activity transition for this second Activity invocation.

• Then at last at this ViewPropertyAnimator we will set our Interpolator and call start()

4. At the end get your Spring Animation object you declared and then call start( ).

Your Splash is ready to setup now compiling all above the code will give you the resultant animation as shown above. For more you can also have a look to the Github repository of this project:

amanjeetsingh150/SpringBasedSplash

Do star the project and give clap to this medium article if you like the project. This project is also open for any kind of improvements or creating issues just open a PR and you are in.

              "May the mass*acceleration be with you."