如何使Bitspin的及时闹钟产生数字变形效果？

Question

我想尝试一些角色变形效果，比如Bitspin的Timely Alarm Clock。 这是效果video！ （0：09~0：11）

我认为这是离线制作的一系列位图更改，但在我反编译程序并搜索了源代码和资源后，我没有找到位图序列资源轨道。

任何人都有想法Bitspin如何做到这一点？

Answer 1

我怀疑Timely正在使用这个库，所以你去：https://github.com/bydavy/android-number-morphing

Answer 2

当字符以矢量形式（线段/贝塞尔曲线）表示时，它们由少量控制点定义。

您可以设计字体，使所有数字的控制点数相同，并定义点的任意顺序。

然后在控制点之间线性插值，成对，将给你一个类似的形状变形效果。

通过选择其他插值方案可以实现无数变体，定义点对应的方式，可能会分成独立的弧...

Answer 3

另一个很棒的图书馆是TimelyView

这是动画

我刚刚复制了lib的用法部分：

用法：

XML布局：

<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"/>

另一个是TimelyTextView：

两个图书馆都很完美，动画很漂亮

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.