How to make number morphing effect like Bitspin's Timely Alarm Clock?

Question

I want to try some character morphing effects like Bitspin's Timely Alarm Clock. Here's the effect video! (0:09 ~ 0:11)

I thought it was a series of bitmaps changes made offline, but after I decompiled the program and searched the source code and the assets, I did not find bitmap sequence resource tracks.

Any one have ideas how Bitspin do it?

Answer 1

When the characters are represented in vector form (line segments/Bezier arcs), they are defined by a small number of control points.

You can design the font in such a way that the number of control points is the same for all digits, and define an arbitrary ordering of the points.

Then linearly interpolating between the control points, pairwise, will give you a similar shape morphing effect.

Innumerable variants are possible by choosing other interpolation schemes, the way point correspondences are defined, possibly with splits into independent arcs...

Answer 2

I suspect that Timely is using this library, so here you go: https://github.com/bydavy/android-number-morphing

Answer 3

Another great library is TimelyView

Here is the animation

I just copied the usage part of the lib:

Usage :

XML Layout:

<com.mbh.timelyview.TimelyTimeView
   android:id="@+id/ttv"
   android:layout_width="wrap_content"
   android:layout_height="60dp"
   app:rounded_corner="true"
   app:text_color="true"
   app:seperatorsTextSize="50"
   android:layout_gravity="center"/>


<com.mbh.timelyview.TimelyShortTimeView
    android:id="@+id/tstv_hours"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:rounded_corner="true"
    app:text_color="true"
    app:seperatorsTextSize="50"/>

And another one is TimelyTextView:

Both libraries are perfect and have beautiful animations

Answer 4

In his excellent post, Alex Loockwood describes how you can use Android's vector drawable animation framwork's path morph feature to create this effect:

In his Github Repo the number morphing plus the required paths are implemented in this repo:

https://github.com/alexjlockwood/adp-delightful-details

Android Vector Drawable Animations require at least SDK 21.