MovingNumbersView

The library renders each visual element (digit, comma, dot, or minus sign) as a centered component within an HStack. Each digit is represented by a 10-digit vertical stack that is moved up or down via a VerticalShift geometry effect based on the current digit being displayed.

To ensure SwiftUI calculates correct insertion and removal transitions, each element is assigned a specific id based on its significance:

• Digits: Multiples of 10 (e.g., 10, 20, 30).
• Decimal places: Negative multiples of 10 (e.g., -10, -20).
• Dot (.): ID of 0.
• Minus sign (-): ID of 1.
• Comma (,): ID of the next digit's ID plus 5.

Example ID mapping for -1,234.56: [1(-), 40, 35(,), 30, 20, 10, 0(.), -10, -20].

You can install MovingNumbersView using either CocoaPods or Swift Package Manager.

### Cocoapods

`pod install MovingNumbersView`

### Swift Package Manager

Go to **File → Swift Packages → Add Package Dependency** then put the repo URL (https://github.com/aunnnn/MovingNumbersView.git).

Initialize MovingNumbersView with a number, the numberOfDecimalPlaces, and an elementBuilder closure. The elementBuilder provides a String representing a single visual element (digit, dot, comma, or minus sign) and allows you to return any SwiftUI View to customize the appearance of each character.

import MovingNumbersView

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

To create a blurry effect on the top and bottom edges of the moving numbers, apply a LinearGradient mask to the MovingNumbersView instance.

MovingNumbersView(...)
    .mask(LinearGradient(
        gradient: Gradient(stops: [
            Gradient.Stop(color: .clear, location: 0),
            Gradient.Stop(color: .black, location: 0.2),
            Gradient.Stop(color: .black, location: 0.8),
            Gradient.Stop(color: .clear, location: 1.0)]),
        startPoint: .top,
        endPoint: .bottom))

In addition to the required parameters, you can use the following optional parameters to control the view's behavior:

• fixedWidth: CGFloat?: Provides a fixed width to the label. This is highly recommended to prevent the label frame from shrinking faster than the digit transition, which causes trailing digits to be cropped. Setting this also enables leading alignment for the digits.
• verticalDigitSpacing: Controls the spacing between digits in the vertical digit stack.
• animationDuration: Sets the duration for the vertical digit stack to move up and down.