Animate UILabel with numbers

Question

I am still learning about UIAnimations, just got into it and I have stumbled upon a problem that I am not sure how to solve. I've seen games where you get a new high score and it adds the new high score to the old high score and they make the numbers animate up or down. It looks very cool and visually appeasing.

Can anyone explain to me how this is done? I apologize if this question is easily solved, like I said I am still trying to learn/perfect animations.

Thanks in advance

score 10 · Accepted Answer · edited May 23 '17 at 12:15

I took the code from the post sergio suggested you look at, but took note of Anshu's mention that you wanted a moving up and down animation rather then a fade-in/fade-out animation, so I changed the code to fit what you wanted. Here you go:

// Add transition (must be called after myLabel has been displayed)
CATransition *animation = [CATransition animation];
animation.duration = 1.0;   //You can change this to any other duration
animation.type = kCATransitionMoveIn;     //I would assume this is what you want because you want to "animate up or down"
animation.subtype = kCATransitionFromTop; //You can change this to kCATransitionFromBottom, kCATransitionFromLeft, or kCATransitionFromRight
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[myLabel.layer addAnimation:animation forKey:@"changeTextTransition"];

// Change the text
myLabel.text = newText;

Hope this helps!

@AlexG - No problem. You might want to play around with the parameters a little bit but it should work fine. — pasawaya, Jul 25 '12 at 23:46

score 2 · Answer 2 · answered Jul 25 '12 at 22:12

People can correct me if I'm wrong here, but I'm pretty sure you have to code this animation manually. You might be able to find an open source version somewhere online if you look hard enough.

It might be possible to take an image of a UILabel and use sizeWithFont: to determine how wide each character is, then cut the image up into sections based on each digit. Alternatively you could just have multiple UILabels for each digit.

Once you have an array of digit images, you'd have to calculate which digits are going to change during the transition and whether they're going to increase or decrease, then transition to the next digit by pushing it in from the top/bottom (I think there's a built in transition to do this, look around in the Core Animation docs).

You would probably want to determine by how much they increase/decrease and use that to figure out how long the animation will take. That way, if you're going from 5 to 900, the last digit would have to be animating very quickly, the second to last would animate 1/10 as quickly, the third would be 1/100, etc.

Thanks for the explanation. Qegal provided the example so only for that reason did I accept. +1 for a good answer though — Alex G, Jul 25 '12 at 23:46

score 0 · Answer 3 · answered Sep 07 '18 at 08:27

This does on ok job, using the reveal function. It would be nice to have some vertical motion, but it's either going to be kCATransitionFromBottom or kCATransitionFromTop - and really we'd need kCATransitionFromBottom | kCATransitionToTop, but that's not a thing. Here's the code:

-(void)countUpLabel:(UILabel *)label fromValue:(int)fromValue toValue:(int)toValue withDelay:(float)delay{

    int distance = (int)toValue - (int)fromValue;
    int absDistance = abs(distance);
    float baseDuration = 1.0f;
    float totalDuration = absDistance / 100.0f * baseDuration;
    float incrementDuration = totalDuration / (float)absDistance;
    int direction = (fromValue < toValue) ? 1 : -1;
    //NSString * subtype = (direction == 1) ? kCATransitionFromBottom : kCATransitionFromTop;

    for (int n = 0; n < absDistance; n++){

        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delay * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

            CATransition * fade = [CATransition animation];
            fade.removedOnCompletion = true;
            fade.duration = incrementDuration;
            fade.type = kCATransitionReveal;
            fade.subtype = kCATransitionMoveIn;
            [label.layer addAnimation:fade forKey:@"changeTextTransition"];

            int value = fromValue + (n+1) * direction;
            label.text = [NSString stringWithFormat:@"%i", value];

        });

        delay += incrementDuration;
    }
}

Animate UILabel with numbers

3 Answers3