How do I take a UIView with a background pattern set and shrink it down vertically with an animation

Question

I want the top of the view to meet the bottom of the view in a quick animation for its disappearance. (Preferably have it grow for a second first.)

How would I go about doing this? The UIView has a background pattern set with [UIColor colorWithPattern:], and when I do self.textOptionsPopover.transform = CGAffineTransformMakeScale(0.0, 0.5);, it just disappears completely.

Answer 1

You have wrong x scale parameter - CGAffineTransformMakeScale(0.0, 0.5) Change to CGAffineTransformMakeScale(1.0, 0.5), cause you don't want to modify your width.

0.0 is the reason that your view is disappearing.

But if you prefer to make it growing for a while first, it would be easier to use CAKeyframeAnimation - you can easly control key-times, values and timing functions. For example you can do something like this:

CAKeyframeAnimation *shrinkAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
shrinkAnimation.values = [NSArray arrayWithObjects:
                          [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)],
                          [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.4, 1.0)],
                          [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 0.0, 1.0)],
                          nil];
shrinkAnimation.keyTimes = [NSArray arrayWithObjects:@0.0, @0.2, @1.0, nil];
shrinkAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
shrinkAnimation.duration = 0.4;
shrinkAnimation.removedOnCompletion = NO;
shrinkAnimation.fillMode = kCAFillModeForwards;
[self. textOptionsPopover.layer addAnimation:shrinkAnimation forKey:@"shrink"];

Edited: If you want the view to shrink "from top to bottom", just change the anchor point of the layer (remember that changing anchor point will change the frame!):

CGRect frame = self.textOptionsPopover.layer.frame;
self.textOptionsPopover.layer.anchorPoint = CGPointMake(0.5, 1.0);
self.textOptionsPopover.layer.frame = frame;

Answer 2

You could change the frame size and animate that. For example

Suppose finalFrameSize is a CGRect for the final value, you could get the animation effect like this.

 [UIView animateWithDuration:0.3f
                  animations:^{
                                 currentView.frame = finalFrameSize;
                             }
                             completion:^(BOOL finished){
                                 // Do something after the animation is comlete
                             }];