android - 如何制作像 Bitspin 的及时闹钟一样的数字变形效果？

Question

我想尝试一些角色变形效果，比如 Bitspin 的 Timely Alarm Clock。这是效果视频！(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

在他的优秀文章中，Alex Loockwood描述了如何使用Android 的矢量可绘制动画框架的路径变形功能来创建这种效果：

在他的 Github Repo 中，数字变形加上所需的路径在这个 repo 中实现：

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

Android 矢量可绘制动画至少需要 SDK 21。