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? :)

Spectacular

I'm curious. A combination of UIViewContentModeTop and animating the height of the "first" image to appear from 100% to 0% didn't work? – Drida

@ZakyGerman, Nope, It scales from the top, which will reveal it in the opposite direction. We ended up using a simple spritesheet for the animation – Spectacular

@ShaiMishali Have you got this with gestures ? – Loaning

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>

Icbm

One more note: you can animate the position of the mask in any direction depending on how you want to reveal the color view that is underneath. – Icbm

THanks a bunch! I'm gonna test it and let you know if it works – Spectacular

Works incredibly well! Thank you so much! (: – Spectacular

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.

Icbm

And if you want it to go in the other direction, just animate the center of the bwImage to the bottom at the same time. – Judiciary

progrmr, Thank you but this is the opposite direction of what i asked (as i stated in my question... ) @JesseRusak , I'm trying to create an animation the other way exactly. What was your suggestion? – Spectacular

Use the answer above, but add an additional animation of bwImage.center to CGPointMake(bwImage.center.x, bwImage.bounds.size.height) in the same animation block. – Judiciary

You might also need to flip your content mode to UIViewContentModeBottom. – Judiciary