Component for displaying string with scroll animation for each numerical symbol. Scrolling directions, animation durations and time offsets can be easily customized.
let animatedView = NumberScrollAnimatedView()
// Add to superview, configure view constraints etc...
// Customize a view properties like background color, font size and color
animatedView.backgroundColor = UIColor(red: 255/255, green: 47/255, blue: 146/255, alpha: 1)
animatedView.font = UIFont.boldSystemFont(ofSize: 64)
animatedView.textColor = .white
// Set animation properties
animatedView.animationDuration = 5
animatedView.scrollingDirectionRule = { (_, columnIndex) in return (columnIndex % 2) == 0 ? .down : .up }
// Set a value which will be displayed
animatedView.text = "220-548"
// Start animation
animatedView.startAnimation()
animationDuration
animationTimeOffsetRule
, specifies the offset of the animation start time for each numerical symbol. By default the function return random values from 0 to 1.animationDurationOffsetRule
, specifies the change in animation duration for each numerical symbol. By default the function return random values from 0 to 1.scrollingDirectionRule
, specifies the animation direction (UP or DOWN) for each numerical symbol. By default the rule return random values.inverseSequenceRule
, specifies whether to invert the sequence of numbers or not. By default is 0123456789, with inversion 9876543210
- By default. All animation parameters are random.
- Scrolling direction is down.
animatedView.scrollingDirectionRule = { (_, _) in return .down }
- Scrolling direction is up, sequence is not inverted, animation duration is the same for all columns.
animatedView.scrollingDirectionRule = { (_, _) in return .up }
animatedView.inverseSequenceRule = { (_, _) in return false }
animatedView.animationDurationOffsetRule = { (_, _) in return 0 }
Created by Alexander Smetannikov ([email protected])