An animated number counter made with SpriteKit, inspired by SwiftUI's ContentTransition.numericText effect.
How It Works
-
There are ten textures for each digit, exported from Figma in the three scaling resolutions. The font is SF Mono.
-
The textures are used as particle textures. There are four particle emitters, two for each digit position. One emitter emits the current digit toward the label, and one emits the previous digit away from the label.
-
The four particle emitters are children of an
SKEffectNode, on which a Core Image Motion Blur filter is applied. -
The counter itself is made of two label nodes for each digit position. The separation allows to animate each digit independently. The label is made with an attributed string
NSAttributedStringin order to use the SF Mono system font and look like the particle textures. -
The rest is the animation and tuning code.
Since the flying numbers are made with particles, we can apply effects such as physics fields:
Context
This experiment started from a question on the SpriteKit Discord Server:
Media unavailable: SpriteKit-NumberCounter-DiscordQuestion.pngLinks
-
Apple Documentation, SwiftUI ContentTransition.numericText.