简体   繁体   中英

Animating a UILabel to grow and shrink

I have a small button in the top left of the screen and it is set in place with constraints. When this button is tapped I want a UIlabel to expand out of it to the right edge of the screen. The UIlabel will take up almost the width of the screen and be about 8Points in height. It contains a line of text. It will display for 2 seconds before reversing the animation so that the UILabel shrinks back into the small button. I am new to ios animation and am confused as there are many types! I need to know:

1) What type of animation technique could I use to create this effect? Code would be nice but I'd like to be pointed in the right direction of study.

2) I've read that UILabel can respond inadequately to animations. Is it problematic to animate them in the way I described?

3) Its imperative that the text within the UILabel(and the label itself!) adapts to various screen sizes via some kind of constraint assignment that works hand in hand with the animations. The size/position of the UILabel must be set via autolayout programmatically.

Thanks

UPDATE: I added this line before the animationWithDuration method(note: (10,5, ....) is where the small button is):

_questionDisplay = [[UILabel alloc]initWithFrame:CGRectMake(10, 5, 0, 30)];

..this line within the first animation block:

_questionDisplay.frame = CGRectMake(10, 5, 600, 30);

..and this line after in the following animationWithDuration method which gets called 3.5 seconds after the first via an NSTimer:

_questionDisplay.frame = CGRectMake(10, 5, 0, 30);

Once the label shrinks it is removed from the view.

This looks good on iPhone6+ but looks wrong in 4s because the label is not being sized with constraints which is what I need.

objective-c

[UILabel animateWithDuration:1
             animations:^{
                 yourView.transform = CGAffineTransformMakeScale(1.5, 1.5);
             }
             completion:^(BOOL finished) {
                 [UILabel animateWithDuration:1
                                  animations:^{
                                      yourView.transform = CGAffineTransformIdentity;

                                  }];
             }];

Swift

UILabel.animateWithDuration(1, animations: { () -> Void in
yourView.transform = CGAffineTransformMakeScale(1.5, 1.5)
}) { (finished: Bool) -> Void in
    UILabel.animateWithDuration(1, animations: { () -> Void in
        yourView.transform = CGAffineTransformIdentity
    })}

It disappears because you are giving a size explicitly. (If you want multiple screens to size it correctly use equal width(proportional) to superview constraint instead of fixed width. After this, use the method mentioned. When your label will appear, it'll have the correct width due to proportional width constraint and the animation will make it grow and shrink back to its original size. Leave the animation blocks empty (no explicit frame changing!) Just change the scaling factor(currently 1.2) until it suits you!

 1) 2) and 3) are all handled here! The label font itself adjusts so you just need to add the animation
 [UIView animateWithDuration:0.5 animations:^{
    // grow the label up to 130%, using a animation of 1/2s
    yourLabel.transform = CGAffineTransformMakeScale(1.2,1.2); //
} completion:^(BOOL finished) {
    // When the "grow" animation is completed, go back to size 100% using another animation of 1/2s
    [UIView animateWithDuration:3.5 animations:^{
        yourLabel.transform = CGAffineTransformIdentity;
    }];
}];

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM