How to animate text inside a label from right to left as a new entry comes up?

Question

I have a calculator-like with UIButtons for the digits (0 to 9) and one UILabel to display the user's inputs.

I would like that for each input, the digits already in the label moves on the left with a slide animation and the new digit appear from the bottom with an animation. How can I do that?

I tried with a CATransition with kCATransitionMoveIn type but it moves the all label (which makes probably sense as it works on the layer level).

But how can I do it if I just want to move the content (the text) and not the frame or layer?

you have received 2 answers for your question, you need to accept one which have helped you so others could benefit from it. Thanks. — Burhanuddin Sunelwala, Apr 18 '15 at 11:30

score 3 · Accepted Answer · answered Mar 22 '15 at 07:08

3

Well for a simple solution you need to create multiple labels and animate them. From multiple labels I mean labels for each digit or symbol. You dynamically create these and animate accordingly.

If you want to only use one label and animate the inside text content then that would not be possible because no such APIs are provided by UILabel.

You can create your own custom Label by using CoreText. I personally don't know much about it but you can read on it.

https://developer.apple.com/library/mac/documentation/StringsTextFonts/Conceptual/CoreText_Programming/Introduction/Introduction.html

But my personal opinion would be to use labels for each digit. It would be good to say rather that consider this each label as a text (digit).

Hope this helps

answered Mar 22 '15 at 07:08

Burhanuddin Sunelwala

5,318
3
25
51

Hmm that's quite a lot of changes in my case. I'll think about. Thanks anyway – Nico Mar 22 '15 at 07:57
Well quite not. You can just use an UIView to display digits. Now when you click on a number, you just need to create a standard label with the number and add it to the UIView with animation. You can have a common method where you pass in the digit (text) and it returns you the label. – Burhanuddin Sunelwala Mar 22 '15 at 08:01
1

I'm finally doing it now, I'm trying it your way but I have a problem, in case you might know it as well... http://stackoverflow.com/questions/29712899/uilabel-appear-in-debug-view-hierarchy-but-not-in-the-application – Nico Apr 18 '15 at 07:01

score 0 · Answer 2 · edited May 23 '17 at 11:43

It is possible to animate the adding of new digits. However, you have to play around with the animation type a bit to achieve a sliding instead of a fading. But this should give you a start:

- (void)addDigit:(NSString *)digit {

    // Add the transition (this must be called after self.calcLabel has been displayed)
    CATransition *animation = [CATransition animation];
    animation.duration = 1.0;
    animation.type = kCATransitionFromRight;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.calcLabel.layer addAnimation:animation forKey:@"changeTextTransition"];

    // Change the actual text value
    NSString *currentText = self.calcLabel.text;
    NSString *newText = [NSString stringWithFormat:@"%@%@", currentText, digit];
    self.calcLabel.text = newText;
}

Credits to https://stackoverflow.com/a/6267259/1770453

EDIT

I hope this is not the code you already have.

Yes it's the one I used, so it's not really what I'm looking for — Nico, Mar 22 '15 at 07:57
Oh that's bad. I realized only now that it might be what you already have. Anyway, I'll leave the answer as people who come here might still benefit. I will continue to find a different solution. — Dennis, Mar 22 '15 at 07:59

How to animate text inside a label from right to left as a new entry comes up?

2 Answers2