I wrote a class today called WipeView that can provide a wipe transition to make any image disappear. Like everything else I post, it’s open-source (Apache 2 license), and I’ve added it to moriarty.
Here’s a bottom-to-top example to see what this class can do:
That’s the moon Europa (of Jupiter) vanishing there.
This kind of transition was made famous by Star Wars and it has its own wiki page, so you know it’s a good one.
It’s a little tricky to implement directly using UIView animations, so
WipeView accomplishes this by simultaneously animating a CALayer’s
bounds. This is much simpler than trying to animate a mask, and faster to render since there’s no transparency.
If you want to use the code, this is how you use it:
// The next line auto-sets the frame size to match the image.
wipeView.image = [UIImage imageNamed:@"Europa.jpg"];
wipeView.duration = 10.0;
[wipeView wipeOutInDirection:CGPointMake(0, 1)]; // Wipe from bottom-to-top.
// You can send in any of the directions (-1, 0), (0, -1), (1, 0) or (0, 1).
Here’s a snippet of the Core Animation stuff, for the curious (this isn’t the full code):
contentsRectAnim.fromValue = [NSValue valueWithCGRect:contentView.layer.contentsRect];
contentsRectAnim.toValue = [NSValue valueWithCGRect:endingContentsRect];
CABasicAnimation *boundsAnim = [CABasicAnimation animationWithKeyPath:@"bounds"];
boundsAnim.fromValue = [NSValue valueWithCGRect:contentView.layer.bounds];
boundsAnim.toValue = [NSValue valueWithCGRect:endingBounds];
CAAnimationGroup *animations = [CAAnimationGroup animation];
animations.delegate = self;
animations.duration = duration;
animations.animations = [NSArray arrayWithObjects:contentsRectAnim, boundsAnim, nil];
[contentView.layer addAnimation:animations forKey:@"wipeOut"];
Hope that’s useful!