iOS slide up an image over an image, revealing the underneath one. (A-la jQuery.slide())

Question

I'm trying to do the following thing -

I have two version of the same image, one colored and one black and white. I want the B&W to "Slide up" revealing the one under it.

I tried setting the height and the frame, but couldn't get it to work like I want it to.

For example , this would be a combination of both UIImages where one is revealing the other, while not moving:

Any ideas? :)

Answer 1

OK, here is a different method using a mask on the grey view. I actually tested this with a blueView and a greyView, where the grey covers up the blue. Put a mask layer on the grey layer so that the grey layer is visible. Now animate the mask away from the grey layer, making the grey layer disappear without moving it, the blue shows thru where the grey disappears.

If you want to experiment with this, create an empty project in XCode with a single view, and put this code inside viewDidLoad. That's how I tested this.

self.view.backgroundColor = [UIColor whiteColor];

UIView* blueView = [[[UIView alloc] init] autorelease];
blueView.backgroundColor = [UIColor blueColor];
blueView.frame = CGRectMake(50,50,100,100);

UIView* grayView = [[[UIView alloc] init] autorelease];
grayView.backgroundColor = [UIColor grayColor];
grayView.frame = CGRectMake(50,50,100,100);

[self.view addSubview:blueView];
[self.view addSubview:grayView];    // gray covers the blue

// Create a mask to allow the grey view to be visible and cover up the blue view
CALayer* mask = [CALayer layer];
mask.contentsScale   = grayView.layer.contentsScale;  // handle retina scaling
mask.frame           = grayView.layer.bounds;
mask.backgroundColor = [UIColor blackColor].CGColor;
grayView.layer.mask = mask;

// Animate the position of the mask off the grey view, as the grey becomes unmasked,
// that part of the grey "dissappears" and is no longer covering the blue underneath
CABasicAnimation* a = [CABasicAnimation animationWithKeyPath:@"position"];
a.duration  = 4;
a.fromValue = [NSValue valueWithCGPoint:mask.position];
CGPoint newPosition = mask.position;
newPosition.y += mask.bounds.size.height;
a.toValue   = [NSValue valueWithCGPoint:newPosition];
a.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[mask addAnimation:a forKey:@"colorize"];   // animate presentation

mask.position = newPosition;        // update actual position

Don't forget this line at the top with the #imports:

#import <QuartzCore/QuartzCore.h>

Answer 2

One way is to stack the UIView's so that the B&W image on top of the color image, where the color image is completely covered (hidden) by the B&W image.

[self.view insertSubview:bwImage aboveSubview:colorImage];

Only the B&W view is visible. Now set clipsToBounds on the B&W view:

bwImage.clipsToBounds = YES;

Finally animate the height in the bounds of the bwImage so that its height shrinks down to 0, clipping the B&W image and revealing the color image behind it. Something like this:

[UIView animateWithDuration:1.0 animations:^{
    CGRect b = bwImage.bounds;
    b.size.height = 0;
    bwImage.bounds = b;
}];

I haven't tried this but hopefully you get the idea.