MovingNumberView

SwiftUI 中的动态数字效果。

自定义元素

也用于类似 Robinhood 的线形图库 RHLinePlot。

特性✨

• 平滑数字过渡
• 自定义数字视图构建器
• 动态小数位数
• 支持整数（只需设置小数位数为0）
• 支持逗号
• 支持负数

要求

• iOS 13, macOS 10.15
• Swift 5.1
• Xcode 11

使用方法

通过 number、numberOfDecimalPlaces 和尾部闭包 elementBuilder 初始化它

MovingNumbersView(
    number: 123.456,
    numberOfDecimalPlaces: 3) { str in
        // How to build each character
        Text(str)
            .font(.largeTitle)
}

要显示整数，只需将 numberOfDecimalPlaces 设置为 0。

elementBuilder: (String) -> some View 将被库用于构建每个视觉元素，例如数字、点和逗号。您可以返回任何 View，因此文本样式可以完全自定义。

可选参数包括 fixedWidth、verticalDigitSpacing 和 animationDuration。`verticalDigitSpacing` 允许您控制垂直数字堆叠中数字之间的间距，而 `animationDuration` 是垂直数字堆叠上下移动的持续时间。

fixedWidth: CGFloat? 是可选的，但很重要。它将为标签提供一个固定宽度，为数字过渡提供空间。如果没有设置，当最后几个数字进入和退出时，标签的框架比过渡缩得更快，您可能会看到它们被裁剪掉。设置此值将有助于改善过渡/动画效果。

它还将数字左对齐，否则，默认值（nil），`MovingNumbersView` 将从中心缩放和扩展，因为它的大小取决于当前视觉元素的数量，从而使过渡变得奇怪。虽然可以通过将其放在带有左对齐的 `VStack` 中来修复此问题，但前面的裁剪问题仍然存在。

安装

将 `MovingNumbersView.swift` 拖到您的项目中。按您喜欢的任何方式进行使用和自定义。

实现方式

基本上，每个数字、逗号、点或减号都有一个视图，默认情况下都居中对齐在 `HStack` 中。查看 VisualElementType 枚举。

要显示一个数字，我们只将垂直数字堆叠向上和向下移动到正确的偏移量。尝试移除遮罩并查看其效果

数字以 10 位堆叠的形式表示，并且通过 `VerticalShift` 几何效果上下移动，该效果只是通过当前显示的数字偏移数字堆叠。（我相信普通的 transform/offset 也可能起作用。）

分配的 `id` 很重要。每个视觉元素都根据其重要性分配一个相对数字。我们为数字使用 10 的倍数、为小数位使用负10的倍数、为点使用 0、为减号使用 1。逗号具有下一个数字加 5 的 `id`。

例如，`-1,234.56 > ids = [1(-), 40, 35(,), 30, 20, 10, 0(.), -10, -20]。

这个方案允许 SwiftUI 计算正确的插入/删除过渡。从 9 到 19 的过渡是从 `ids = [10("9")]` 到 `ids = [20("1"), 10("9")]` 的迁移。也就是说，我们不是将 9 动画到 1，而是简单地将新的 1 拖入。