Animate UILabel not smooth

Question

I am trying to animate a UIlabel to first grow larger, then shrink back to its original frame. Enlarging work as expected, but not shrinking. When I shrink the label with the below code, the size adjusts first before the origin is shifted. This causes a two step animation which isn't smooth.

Here is my code:

CGRect rect = label.frame;
[UIView animateWithDuration:.2
                      delay: 0.1
                    options: UIViewAnimationOptionBeginFromCurrentState
                 animations:^{
                     label.frame = CGRectMake(rect.origin.x + 4,
                                                                        rect.origin.y + 4,
                                                                        rect.size.width-8,
                                                                        rect.size.height-8);
                 }
                 completion:^(BOOL finished){
                 }];

Answer 1

You could try applying a transform to the label inside your animation block instead of adjusting the rect. Something like the following lines for the grow/shrink animations:

label.transform = CGAffineTransformMakeScale(1.5, 1.5); //grow
label.transform = CGAffineTransformMakeScale(1, 1);     //shrink

Answer 2

Please tryout this solution, I guess it is what you are looking for. I have tested it for working but please try and let me know if you are looking for this or not.

-(IBAction)growanimate:(id)sender
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(shrinkanimate)];
    label.transform = CGAffineTransformMakeScale(2.0f, 2.0f); //This will double label from current size.
    [UIView commitAnimations];
}

-(void)shrinkanimate
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    label.transform = CGAffineTransformMakeScale(1.0f, 1.0f); //This will get it back to original size.
    [UIView commitAnimations];
}

Answer 3

I guess the problem is caused by the fact that resizing the frame triggers resize notifications. There may be more interruptions when shrinking because new areas of the superview are revealed.

The transform method is much better, in this case.

I also guess that with the transform method, the glyphs paths and layout ( line breaks and so...) are not recomputed and cached CGPath are simply transformed at rendering time.

---

About the centering problem, I don't see any issue.

I'd like to add, that if you plan to make an extensive use of this effect, you may create a static class for this effect, or containing several preset animations, with statically stored transforms inside.

Then you make calls such [MyPopEffect popView:mylabel];

It avoids creating and releasing transforms, and allow instant use for any views, or in other projects.

Anyway, here is the animation code... Cheers

[

UIView animateWithDuration:0.5f delay: 0.0f
    options:UIViewAnimationOptionCurveEaseOut+UIViewAnimationOptionBeginFromCurrentState
        animations:^{   
            label.transform=CGAffineTransformMakeScale(2.0f,2.0f);
        }
    completion:^(BOOL finished){
            [UIView animateWithDuration:0.5f delay: 0.0f
            options:UIViewAnimationOptionCurveEaseIn+UIViewAnimationOptionBeginFromCurrentState
            animations:^{
               label.transform=CGAffineTransformMakeScale(1.0f,1.0f);
            }
            completion:^(BOOL finished){}];
    }];

]