Animate Everything! (Android Animation Showcase)
As in my previous articles in this one we’ll also try to step by step implement one beautiful design from Dribbble. I love sport, and I found a good idea for the design of a sports app created by Prajapati VivekSurat. It’s just a static mockup, but we’ll add some motion to it.
Let’s begin!
As developers, we want to know what we have to do 😃 And this is a final result of our work:
Let’s start implementing it! 🔨
Hamburger menu animation
There are a lot of good articles about ShapeShifter created by Alex Lockwood. With this tool you can create any type of icon animations. To experiment with the animation like on the gif above, just import the hamburger.shapeshifter file into the ShapeShifter web app. And take a look at this hamburger ideas by Jonathan Suh.
Top semicircle animation
It is nothing more than a custom view with a simple animation. We use two semicircles: one for the background and other for the foreground (white). And we simultaneously animate the color of the background semicircle and the color and size of the foreground semicircle.
But to create such a smooth animation using fragments or activities is not so easy due to some delay after entering a new activity or fragment. To achieve the desired result, we build our screens using a view-based approach with a Conductor framework. Conductor allows to switch between view-based screens as quick as possible without any delays.
We put our animated ArcView in root activity and make our view-based screens transparent. Than we call arcView.startAnimation() when moving from one screen (view) to another, and at the end of the arc animation, we start the animation on the target screen views.
Animate items list
It’s just as simple as everything above. Just extend the default LinearLayoutManager, calculate the y coordinate of the item and update alpha and scale properties.
And the final step: animate items out & in
We have 2 ways to make this animation: using the ViewOverlay layer as described in my previous article or the simplest, just extend our custom layout manager with three methods:
The work is done! 😎💪
Feel free to grab the source code on GitHub:
Thank you for reading, Happy Coding!
And don’t forget 👏
