AButtonStudy

A button study, how a button was animated from layers

 

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.

button2 3.gif

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.

Twitter iOS like button

Twitter iOS like button

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.

frame1.jpg

Phase 2, a red dot. 4 frames.

frame2.jpg
frame3.jpg

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.

frame4.jpg


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.

frame5.jpg
frame6.jpg
frame7.jpg
frame8.jpg

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

principle1.png

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

spring animation properties

Layers of animations

Layers of animations

The original button

The original button

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.

The polished button

The polished button

How about a matrix of them on a real phone?

tg_image_3726507314.jpeg