Search code examples
androidanimationgraphicseffectmorphing

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

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?

Solution

  • 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...