This page talks about how I analyzed a button animation created from a reverse engineering perspective. Even a less-than-a-second animation could be highly complicated and these subtle and complex little movement can lead to the best user experience.
Twitter has a really great like button.
I was amazed by Twitter’s like button on iOS app. It is so rich, so satisfied to hit. It looks like a firework busting in the deepest dark of the universe. It gets even better that the app uses iPhone’s taptic engine to mimic a press-in effect.
Analysis based on layers
Let’s take a close up on the animation. The screenshot is based on a 30fps recording so the frame number may change according to higher or lower fps rate.
Phase 1, an empty heart. 0 frame.
Phase 2, a red dot. 4 frames.
The dot expands and becomes lighter in color, till a point a white dot appears in the center.
Phase 3, a white dot. 4 frames.
Phase 4, a filled red heart. 18 frames.
This phase is the longest, consisting of 70% frames in the entire animation. The white dot starts to expand till a filled red heart appears in the center with 7 smaller multi-colors dots appear on the outer rim of the white dot. They are becoming larger dots white swirling around the growing heart, and eventually disappear.
Remake/redesign the animation
The tool I use for this animation project is Principle.
Layer 1- empty heart
Layer 2- red dot
Layer 3- white dot
Layer 4- filled heart
Layer 5-swirling dots 1
Layer 6-swirling dots 2
I moved forward with my own design. I put text “+1s” as an additional layer. The layering looks like this, in a total with 7 layers on top of each other. With the scrutiny and articulation of transaction effect, some were set to spring while others were set as default and custom. The picture below shows the property of the spring effect.
spring animation properties
However the swirling dots may seem pretty awesome on a small scale, like the tiny like button on Twitter app. When they are large enough like the one I just shew, it may seems a little too chaotic. So I replace the dots with some lighting stripes and changes a bit on the shadow.
How about a matrix of them on a real phone?