A lightweight UIView for getting smooth rolling animation between numbers implemented using only CALayer
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