Rolling Numbers Animation Using Only CALayers

I’m an iOS Engineer at Triumph Labs where I develop TriumphSDK for game devs. Not so long ago I got a task to completely reimplement UI and animations. One of the most interesting parts was implementing of balance view with rolling animation of the number in it:

https://vimeo.com/813889559

At the first sight, it looks pretty simple but we needed a well-configured custom solution. Of course, I checked existing libraries that I could reuse and adjust this kind of animation for our needs. After the first try, I figured out that the libraries are not so adjustable and we cannot control the animation of each number. I won’t go into details too much, however, I decided to make my own solution from scratch.

Now it is an open-source project that is available as Cocoapod and Swift package: https://github.com/maxkalik/RollingNumbers

CALayers

I had a list of requirements — how should the animation look, but also I added another one — the component should be implemented only using 

CALayers

UIViews

UIScrollViews

UIStackVeiws

UIView

UIView.animate

CALayers represent the visual content of

UIView

Solution

If to check open-source solutions, the approach of how to construct the view is everywhere almost the same: a stack of numbers but visible ones only based on the state. My wireframe looks the same but different :) As you can see in the picture the stacks of numbers are doubled, this means the number of elements in one stack is 20.

This particular number of elements needs a smooth transition from an initial state to the next one and in the meantime the direction of rolling I wanted to be fully configurable. Let’s say, if a stack would have only 10 elements (and it would be pretty reasonable from the first sight) then the rolling direction from one digit to another would be always different. I needed to obey the direction rolling, for example, all digits from up to down.

Each stack in the view is 

CALayer

Characters

All characters are  

CATextLayers

UIStackView

CALayers

To get the width of a character is a pretty straight-forward task using 

NSAttributedString

private func prepareWidthOfChar(_ char: Character) -> Double {
    let fontAttributes = [NSAttributedString.Key.font: font]
    let size = String(char).size(withAttributes: fontAttributes as [NSAttributedString.Key : Any])
    return size.width * characterSpacing
}

This function also helps to calculate an actual with of all columns in the Rolling Numbers view. To get this information a developer can use the public property 

width

Animation Configuration

To achieve the spring animation effect I used 

CASpringAnimation

y

CALayer

CATextLayers

private func animate(config: RollingNumbersView.AnimationConfiguration,
                 completion: (() -> Void)? = nil) {
        
  CATransaction.begin()
        
  let animation: CASpringAnimation = CASpringAnimation(keyPath: "position.y")
  let fromValue: CGFloat = position.y
  let toValue: CGFloat = moveToDigit()

  animation.fromValue = fromValue
  animation.toValue = toValue
  animation.duration = config.duration
  animation.speed = config.speed
  animation.damping = config.damping
  animation.initialVelocity = config.initialVelocity
  animation.isRemovedOnCompletion = false
  animation.fillMode = .forwards
        
  CATransaction.setCompletionBlock {
    completion?()
  }
        
  add(animation, forKey: nil)
        
  CATransaction.commit()
}

Additionally, I used 

CATransaction

rollingNumbersView.setNumberWithAnimation(245699) {
    // completion
}

For the default animation config, I prepared a separate 

struct

AnimationConfiguration

duration: CFTimeInterval = 1,
speed: Float = 0.3,
damping: CGFloat = 17,
initialVelocity: CGFloat = 1

Animation Type

There are 4 animation types prepared for usage:

public enum AnimationType {
    case allNumbers
    case onlyChangedNumbers
    case allAfterFirstChangedNumber
    case noAnimation
}

AnimationType

animationType

Let’s consider an example formatted as US currency. The initial value is $4.588.77. The future value is $4.576.67 (the changed numbers in the price I highlighted in bold).

By default, the animation is set up with 

.allAfterFirstChangedNumber

.onlyChangedNumbers

.allNumbers

Rolling Direction

The numbers rolling direction can be configured using specific public properties 

rollingDirection

RollingDirectionwhere

.up

.down

.up

Formatting

There are several options to format the Rolling Numbers: alignment, character spacing, font, 

NumberFormatterconfigurator

var rollingNumbersView = {
    // Initialize Rolling Numbers view with initial number value
    let view = RollingNumbersView(number: 1234.56)
    
    // 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
}()

Changing the size of the font keep in mind that the actual height of the view can be smaller, this means the digits can be invisible.

Besides general public property 

textColor

rollingNumbersView.setTextColor(.blue, withAnimationDuration: 3)

Under the hood, the animation implemented using 

CABasicAnimation

forgroundColor

setTextColor

Wrapping up

I enjoy building UI for mobile apps and solving performance problems. If it’s needed to use more than just 

UIView

When I finished building the Rolling Numbers component, I decided to share my solution with everyone — making a public library. Full documentation of usage of Rolling Number you can get from the GitHub repository: https://github.com/maxkalik/RollingNumbers. Welcome to everyone who can contribute and suggest improvements to this project via PR!

Links

• Core Animation Programming Guide
• CALayer
• Rolling Numbers