iOS Recipes - Matt Drance [8]
break;
case ClearFromBottom:
self.maskImageName = @"BottomStripMask";
self.anchor = CGPointMake(0.5, 1.0);
break;
default:
return;
}
[self performSelector:@selector(animate)
withObject:nil
afterDelay:self.delay];
}
The only active part of our transition is the animation of the mask layer. We need to increase the scale, effectively enlarging the layer, until we have stretched the transparent portion of the mask to cover the whole view. The toValue we use here contains a bit of fudge factor but is calculated to make the mask large enough to complete the reveal. If we were to significantly modify the mask image, we might need to adjust this calculation.
SplashScreenReveal/PRPSplashScreenViewController.m
- (void)animate {
if ([self.delegate respondsToSelector:@selector(splashScreenWillDisappear:)]) {
[self.delegate splashScreenWillDisappear:self];
}
[self setMaskLayerwithanchor];
CABasicAnimation *anim = [CABasicAnimation
animationWithKeyPath:@"transform.scale"];
anim.duration = DURATION;
anim.toValue = [NSNumber numberWithInt:self.view.bounds.size.height/8];
anim.fillMode = kCAFillModeBoth;
anim.removedOnCompletion = NO;
anim.delegate = self;
[self.view.layer.mask addAnimation:anim forKey:@"scale" ];
}
In the setMaskLayerwithanchor method, we need to create the mask layer for our effect, set its contents to the appropriate mask image, and set the correct anchor point to ensure that the seed point of opacity on the mask coincides with the anchor point.
SplashScreenReveal/PRPSplashScreenViewController.m
- (void)setMaskLayerwithanchor {
CALayer *maskLayer = [CALayer layer];
maskLayer.anchorPoint = self.anchor;
maskLayer.frame = self.view.superview.frame;
maskLayer.contents = (id)self.maskImage.CGImage;
self.view.layer.mask = maskLayer;
}
Based on the selected Enum, we need to fetch and set the correct mask image for the required transition.
SplashScreenReveal/PRPSplashScreenViewController.m
- (UIImage *)maskImage {
if (maskImage != nil) [maskImage release];
NSString *defaultPath = [[NSBundle mainBundle]
pathForResource:self.maskImageName
ofType:@"png"];
maskImage = [[UIImage alloc]
initWithContentsOfFile:defaultPath];
return maskImage;
}
The animationDidStop delegate is called once the animation has finished stretching the mask layer. The transitioned view now appears to have been removed, so all we need to do here is remove it from the SuperView and notify the delegate that the transition has completed.
SplashScreenReveal/PRPSplashScreenViewController.m
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
self.view.layer.mask = nil;
[self.view removeFromSuperview];
if ([self.delegate respondsToSelector:@selector(splashScreenDidDisappear:)]) {
[self.delegate splashScreenDidDisappear:self];
}
}
The gradual reveal transition adds a little more polish to the opening of your app and is easily extended to provide more options. The shape of the transparent area of the mask is maintained as it scales, so alternate shapes could yield interesting effects—star shapes, for example. You could even use more complex shapes, such as faces, but it may then be necessary to add an additional fade animation to remove any residual visual elements.
Recipe 3 Animate a Custom Notification View
Problem
Sometimes you need to signal that something has changed in your app—perhaps the completion of a background task. The notification mechanisms Apple provides—UIAlertView, for example—are generally modal, which is not always ideal because the notification pulls the user’s attention away from the main app and requires a touch to dismiss. How can you create a nonmodal mechanism that attracts attention but can be easily ignored?
Solution
You need a solution that is reasonably generic and doesn’t depend too much on the layout of your app. There are several techniques to choose from, but for this recipe we’ll use a UIView that slides onto the screen and can be dismissed with a touch or can remove itself after a set amount of time. Using a slide animation