How can I animate a box to expand and contract on touch?

Question

I read the intro to core animation from Apple, searched all over for 'ios tweening,' 'ios easing,' and related thins but surprisingly came up empty handed.

How can I make my UILabel contract and hide its subview buttons while keeping the UILabel showing? Links, code, design overview, or anything that gets this done will be extremely helpful.

Can you just have a view behind the label that expande its frame height when the label is touched? — Wain, Jun 06 '13 at 16:56
Wain, that is nicely crafty and I will probably do that until I find an optimal solution. But I won't get to use the nifty animation effects shown at http://stackoverflow.com/questions/5161465/how-to-create-custom-easing-function-with-core-animation — user, Jun 06 '13 at 17:04
Sure you could use those, it's just a different way of animating the view frame... — Wain, Jun 06 '13 at 17:09
You need to animate the changes in frame. Here is an answer I wrote in the past that is applicable to your question. http://stackoverflow.com/questions/16765577/how-can-i-make-this-animation-effect-in-iphone-development-quartz2d-core-anima/16765737#16765737 — rog, Jun 06 '13 at 17:23

score 0 · Accepted Answer · answered Jun 11 '13 at 01:46

Surprised no one stepped to this, the answer is pretty straightforward. But maybe that's why.

I'm not sure about animating the UILabel itself, though as it is a subclass of UIView, I suspect it would be fairly normal.

The simplest way to get this done is to use the UIView static method:

+ (void)animateWithDuration:(NSTimeInterval)duration 
                 animations:(void (^)(void))animations

In my case, I have a UILabel, myLabel on top of a UIView myContainer with a UIButton dismissButton. Presuming I want dismissButton, when clicked, to roll up myContainer I would Crtl-drag my dismissButton button to the proper viewController.m and in the -(IBAction) method write:

-(IBAction)dismissButtonPressed:(id)sender
{
   [UIView animateWithDuration:1.0
                    animations:^{ 
           [self.myContainer.frame = CGRectMake(0,0,frame.bounds.size.width,20)];
           [self.dismissButton removeFromSuperView]; }];
}

Note: This is from my limited memory, so point out any errors.

Note2: If you are using this to help yourself, watch those semicolons, brackets and braces

Now, most people reading this for reference might want more functionality that clicking a button which rolls up a view forever. There are more detailed animateWith* methods.

There is

+(void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

which allows a completion block to be done once the view is finished animating. Note from Paul Hegarty's iOS class: You may call more animate methods from your completion block.

There is another animation method that lets us specify animation options.

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

The options include:

enum {
   UIViewAnimationOptionLayoutSubviews            = 1 <<  0,
   UIViewAnimationOptionAllowUserInteraction      = 1 <<  1,
   UIViewAnimationOptionBeginFromCurrentState     = 1 <<  2,
   UIViewAnimationOptionRepeat                    = 1 <<  3,
   UIViewAnimationOptionAutoreverse               = 1 <<  4,
   UIViewAnimationOptionOverrideInheritedDuration = 1 <<  5,
   UIViewAnimationOptionOverrideInheritedCurve    = 1 <<  6,
   UIViewAnimationOptionAllowAnimatedContent      = 1 <<  7,
   UIViewAnimationOptionShowHideTransitionViews   = 1 <<  8,

   UIViewAnimationOptionCurveEaseInOut            = 0 << 16,
   UIViewAnimationOptionCurveEaseIn               = 1 << 16,
   UIViewAnimationOptionCurveEaseOut              = 2 << 16,
   UIViewAnimationOptionCurveLinear               = 3 << 16,

   UIViewAnimationOptionTransitionNone            = 0 << 20,
   UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,
   UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,
   UIViewAnimationOptionTransitionCurlUp          = 3 << 20,
   UIViewAnimationOptionTransitionCurlDown        = 4 << 20,
   UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,
   UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,
   UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,
};
typedef NSUInteger UIViewAnimationOptions;

Hopefully someone can benefit from this long winded intro to animating a UIView.

How can I animate a box to expand and contract on touch?

1 Answers1