How to animate incrementing number in UILabel in swift

Question

I have a label showing a number and I want to change it to a higher number, however, I'd like to add a bit of flare to it. I'd like to have the number increment up to the higher number with an ease-in-out curve so it speeds up then slows down. Please, how to implement this in swift, Here is my code. Thanks.

 let newValue : Double = 1000 
 let oldValue : Double = 500 

 timer = NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector: Selector("countAnimation:"), userInfo: ["oldValue":oldValue, "newValue": newValue],  repeats: true)

func countAnimation(timer: NSTimer)
{
    let dict = timer.userInfo as? [String:AnyObject]
    var OldTotalValue : Double = (dict!["oldValue"] as? Double)!
    let newTotalValue : Double = (dict!["newValue"] as? Double)!

    OldTotalValue = OldTotalValue + 10


    if newTotalValue < OldTotalValue
    {
        timer.invalidate()
    }
  else

    {
         mylabel.text =  String(OldTotalValue)
    }
}

Can you describe a little more precisely how it should look? Should e.g. the old value fade out while the new one fades in at the same place? Or should the old one turn aside while the new one turns in, like with a picker? Or what is your goal? — Reinhard Männer, Nov 18 '16 at 20:25
Possible duplicate of: http://stackoverflow.com/questions/33632266/animate-text-change-of-uilabel — NikxDa, Nov 20 '16 at 12:25

score 2 · Answer 1 · answered Nov 21 '16 at 01:01

I am not entirely familiar with swift. But I have implemented this previously using a parabolic curve.

In detail more or less what is happening is basic algebra. You have a graph with a value x on one axis and then y in the time axis. You want the time delay between each animation to increase until it reaches a plateau.

For example:

x=1 delay= 100ms, x=2 delay =200ms, x=3 delay=310ms, x=4 delay=430ms

notice that every increase is more than the previous.

Mathematically to get such a slope, you could sit in front of a formula such as:

y = -x + x^2

and play around with it until you get an output such that for every increment of x your delay corresponds to a nice slow down that will look clean on an animation.

Thankfully Apple as included libraries that will do this, I found it with a quick search:

 UIViewAnimationOptions.CurveEaseOut

This library will give you a curve that starts quickly then slows down, here is the rest of the Apple Documentation

score 1 · Answer 2 · answered Nov 21 '16 at 05:50

Please check this:

func countAnimation(timer: NSTimer)
{
    UIView.transitionWithView(label,
                          duration: 1.0,
                          options: [.CurveEaseInOut],
                          animations: { () -> Void in
                          // Write your code here
    }, completion: nil)

}

How to animate incrementing number in UILabel in swift

2 Answers2