Animating Frame of UILabel smoothly

Question

I've been trying to figure out a decent way to smoothly animate a frame size change on a UILabel, without a weird starting jump redraw. What happens by default is that when I do something like this:

// Assume myLabel frame starts as (0, 0, 100, 200) 
[UIView beginAnimations:@"myAnim" context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDuration:1.0];
myLabel.frame = CGRectMake(0.0, 0.0, 50, 100);
[UIView commitAnimations];  

I get a smooth animation with the label, however the way that it does it is that it takes the redrawn image layer for the destination size of the label and streches the content to fit the current then animates to the destination rect. This ends up with a very bizarre jump in the text display. Here are two images showing the pre-animation look, and then just after the animation starts:

Pre-Animation

Post-Animation

I have tried to use just the layer to animate this, but I still get the same issues.

So the question is, how can I avoid this?

Thanks for any help,
Scott

Answer 1

To expand on @cliclcly's answer: From the Overview of UILabel's documentation:

The default content mode of the UILabel class is UIViewContentModeRedraw. This mode causes the view to redraw its contents every time its bounding rectangle changes. You can change this mode by modifying the inherited contentMode property of the class.

From the documentation of the contentMode property of UIView:

The default value of this property is UIViewContentModeScaleToFill.

UILabels behave differently than other UIViews by default because their contentMode property is different by default.

Answer 2

Animating the frame doesn't animate changing the font size. If I understand what you behavior you are seeing, I think you have the label's adjustsFontSizeToFitWidth set to 'True' so you're seeing the frame animate to size followed by the instantaneous readjustment of the font size.

You might try to scale the label's transform so that the frame and font scale simultaneously.

Answer 3

I found that UIlabel frame animations are weird - their size is set immediatly to the end size and the text is rendered for that size. After that only the position change is animated, which means that if the destination size is (0,0) then the label disappears immediately. To circumvent this limitation I have placed the label inside a view of the same size that clips subviews, disabled autoresizing for the label, and I'm animating the label's superview instead of the label itself. The end result is that the label frame is fully animated throughout but the contained text isn't re-rendered with, say, a different font size nor does text truncation change. It's still not perfect, but it's fit for my purpose.

Initial frame:

During animation:

Animation ended:

Answer 4

Hooray for answering a two-year dead question, but I found the answer. Either in Interface Builder or in code, change the contentMode property of the label. Yours seems to be set on scaleToFill; try left or right.

Answer 5

Just turn off auto-layout for your label.

In Xcode, click on the label and then in the properties pane, un-check the auto-layout option