Animated number

Haxe
#1

Hi,
in the past I have created different solutions to animate a number, given

  • the initial and the final values
  • the update rate
  • the sound fx to play at each update
  • etc.
    using timers, tweening systems etc, but I’d like to know how do you implement this kind of animations, which tricks or libraries do you use to achieve a smooth result.
#2

Maybe…

private var currentNumber:Float = 10;

...

Actuate.tween (this, 5, { currentNumber: 0 }).ease (Linear.easeNone).onUpdate (updateNumber);

Maybe it’s quirky, but I think this would work – you tween some arbitrary value, then on update, you can update the graphics you’re using based on it.

You could also do a custom class with a getter or setter to (maybe) be a little more polished

1 Like
#3

Agreed, keep the number separate from the text.

Tweening is optional; the important thing is that you update the text once per frame. (Because “once per frame” is the smoothest animation you can make.)

#4

Done, no quirky at all, I used a similar approach when I created these animations with Greensock libraries.
Thank you!