RollingNumbers

RollingNumbers is a lightweight UIView for getting smooth rolling animation between numbers implemented using only CALayer.

In Triumph Arcade building Triumph SDK for game developers. I had a task to create Rolling Numbers animation for a balance component. Sometimes we cannot afford to use third-party libraries, so I decided to make my own solution using only CALayers in purpose to avoid performance issues.

Requirements

• iOS 11.0+
• Swift 5.0+

Instalation

Cocoapod

RollingNumbers is available through CocoaPods:

pod 'RollingNumbers'

Swift Package Manager

https://github.com/maxkalik/RollingNumbers.git

Usage

Initialize a RollingNumbersView.

let view = RollingNumbersView()

Set number with animation

rollingNumbersView.setNumberWithAnimation(1234.56)

Set number without animation

rollingNumbersView.setNumber(1234.56)

Configuration

var rollingNumbersView = {
    // Initialize Rolling Numbers view with initial number value
    let view = RollingNumbersView(number: 1234.56)
    
    // Configure animation type
    view.animationType = .onlyChangedDigits
    
    // Rolling direction will scroll only up
    view.rollingDirection = .up
    
    // Spacing between numbers
    view.characterSpacing = 1
    
    // Text color
    view.textColor = .black
    
    // Alignment within UIView
    view.alignment = .left
    
    // UIFont
    view.font = .systemFont(ofSize: 48, weight: .medium)
    
    let formatter = NumberFormatter()
    formatter.numberStyle = .currency
    view.formatter = formatter
    
    return view
}()

Animation Type

Type	Description
allNumbers	All numbers roll if even only one number change
onlyChangedNumbers	Only changed numbers roll
allAfterFirstChangedNumber	All numbers roll after first changed number
noAnimation	Numbers change without animation

Animation Direction

Type	Description
up	Rolling animation direction from up to down
down	Rolling animation direction from down to up

Specific Configureation

Set text color with animation with optional transition duration between existing color and the next one.

rollingNumbersView.setTextColor(.blue, withAnimationDuration: 3)

Animation Configuration

rollingNumbersView.animationConfiguration = RollingNumbersView.AnimationConfiguration(
    duration: 3,
    speed: 0.3,
    damping: 17,
    initialVelocity: 1
)

Completion

Use completion for each numbers animation

rollingNumbersView.setNumberWithAnimation(245699) {
    // completion
}

Contributing

Be welcome to contribute to this project!

License

This project was released under the MIT license.

Author

Max Kalik, maxkalik@gmail.com