Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animating Frame of UILabel smoothly

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

like image 629
Scott Little Avatar asked Nov 13 '09 14:11

Scott Little


3 Answers

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.

like image 161
cliclcly Avatar answered Dec 26 '22 15:12

cliclcly


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.

like image 28
titaniumdecoy Avatar answered Dec 26 '22 16:12

titaniumdecoy


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:

initial frame

During animation:

During animation

Animation ended:

Animation ended

like image 26
user3099609 Avatar answered Dec 26 '22 14:12

user3099609