numberscrollanimatedview's Introduction

NumberScrollAnimatedView

Component for displaying string with scroll animation for each numerical symbol. Scrolling directions, animation durations and time offsets can be easily customized.

Usage

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()

Animation parameters

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

Animation examples

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 }