iOS Animating a fade-transition from the top down

[soerentoft]

Hi, I have been trying to make an animation where one view fades out, revealing the view behind it. This is pretty straight forward, but the problem is that I want the fade transition to happen from the top down, so the bottom view is revealed from the top down.

Want i want to achieve is something like this

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:5.0f];
[UIView setAnimationDelegate:self];
[frontView setAlpha:0];
[UIView commitAnimations];

...only, the transition should happen from the top down.

I have also tried doing something like this

CATransition *animation = [CATransition animation];
[animation setType:kCATransitionFade];
[animation setSubtype:kCATransitionFromTop];

But unfortunately, the kCATransitionFade does not support a direction (unlike the other transtion types)

I don't much experience on the Iphone platform yet, so I hope this will be easy for somebody who does

 

[SqueegyX]

I think you can animate the frame property. In between you begin/commit do something like:

frontView.frame = CGRectMake(0, 480, 320, 480);

That should set its top left y coordinate to the bottom of the screen, moving it out of the visible area.

obviously, alter your frame properties how you need it.

 

[soerentoft]

Thank you SqueegyX, but this is not exactly what I am looking for. The code you suggested will make the frontView slide out of the bottom of the screen.

Imagine taking an eraser, an erase the frontView from the top down, gradually revealing the bottomView. This is the kind of effect I'm looking for.

 

[SqueegyX]

2 ways I can think of doing that. The easy one is to put the view you want to reveal on top, and and then animate its frame height so it slowly draws itself over this over view until it completely occludes it.

Otherwise, views are kind of anchored to the upper left corner, so you would need to include your view that needs to dissapear in a scroll view. animate the top and height of the scroll view to shrink, as well as the scroll view position so it clips the top of the view as it shrinks down. This would be kind of hairy to setup I think and seems like squashing a fly with a sledgehammer.

 

[soerentoft]

I have been playing around for yet a couple of hours, also inspired by your suggestions. I may now have tried almost all possible ways of doing this wrong. I haven't tried your second suggestion though, as I can imagine that will be almost impossible to set up.

I can animate the height of the frame, and that works great. The problem is, that the animation scales the picture instead of just cropping it. I have been looking on all sorts of properties to change this, but haven't found a solution yet.

 

[Nutter]

I can animate the height of the frame, and that works great. The problem is, that the animation scales the picture instead of just cropping it.

Try setting the view's contentMode property to UIViewContentModeBottom.

 

[soerentoft]

I have tried setting the contentMode to all kinds of different settings including UIViewContentModeBottom. This setting still does not crop the image in the view, but just slides the entire image.

I guess if I could figure out at way to crop the view (or the image in the view), without actually resizing the image, and if this could be animated, this would help me a lot.

 

[soerentoft]

I finally got this to work - I had been one the right track, but got myself side tracked again.

I set up the view like this:

frontImage = [UIImage imageNamed:@"frontImage.png"];
[frontView initWithImage:frontImage];
frontView.frame = CGRectMake(0.0, yDisplacement, frontImage.size.width, frontImage.size.height);
[self addSubview:frontView];

And then, in the animation context:

frontView.frame = CGRectMake(0, yDisplacement + frontImage.size.height, frontImage.size.width, 0);
frontView.contentMode = UIViewContentModeBottom;
frontView.clipsToBounds = YES;

The combination of changing the y-anchorpoint, clipsToBounds, and the right contentMode did the trick.

Thank your for leading me on the right track.