Wipe Transitions

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 contentsRect and 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:

  WipeView *wipeView = [WipeView beInit];
  // The next line auto-sets the frame size to match the image.
  wipeView.image = [UIImage imageNamed:@"Europa.jpg"];
  wipeView.duration = 10.0;
  [self.view addCenteredSubview:wipeView];
  [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):

  CABasicAnimation *contentsRectAnim = [CABasicAnimation animationWithKeyPath:@"contentsRect"];
  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!

One Trackback

  1. By WipeView | Loop Twister on March 31, 2011 at 2:49 pm

    […] can read more here or download the code […]

Post a Comment

Your email is never published nor shared. Required fields are marked *