UIView animation to slide down

Question

I'm trying to slide down an image in an UIImageView, but I don't know which combination of UIContentMode and animation property is the right one to make that happen. The image should always have the same size and should not be streched... all I want is, that nothing is visible first and then the frame extends and reveals the image.

Maybe it's easier if you see what I mean:

So, it sounds rather easy, but what UIContentMode should I use for the UIImageView and what property should I animate? Thank you!

Answer 1

I took your lead and made a screencast as well. Was this what you had in mind?

I put the animation repeating indefinitely so it would be easier to capture with a video, but it can be started at the press of a button, as well as frozen in place, showing the popover and its contents, until reversed to be hidden again.

I used Core Animation for that, instead of animating a UIView, since I wanted to use the mask property of CALayer to hide the popover and reveal it with a sliding animation.

Here is the code I used (same as in the video):

- (void)viewDidLoad
{

    // Declaring the popover layer
    CALayer *popover = [CALayer layer];

    CGFloat popoverHeight = 64.0f;
    CGFloat popoverWidth = 200.0f;

    popover.frame = CGRectMake(50.0f, 100.0f, popoverWidth, popoverHeight);
    popover.contents = (id) [UIImage imageNamed:@"popover.png"].CGImage;

    // Declaring the mask layer
    CALayer *maskLayer = [CALayer layer];
    maskLayer.frame = CGRectMake(0, - popoverHeight, popoverWidth, popoverHeight);
    maskLayer.backgroundColor = [UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:1.0f].CGColor;

    // Setting the animation (animates the mask layer)
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.y"];
    animation.byValue = [NSNumber numberWithFloat:popoverHeight];
    animation.repeatCount = HUGE_VALF;
    animation.duration = 2.0f;

    [maskLayer addAnimation:animation forKey:@"position.y"];

    //Assigning the animated maskLayer to the mask property of your popover
    popover.mask = maskLayer;

    [self.view.layer addSublayer:popover];

    [super viewDidLoad];
}

NOTE: You have to import the QuartzCore framework into your project and write this line in your header file: #import <QuartzCore/QuartzCore.h>.

Tells if this works for you or if you need any more help setting this up.