iOS Recipes - Matt Drance [7]
Figure 5. The CircleFromCenter transition in action
* * *
Though we explore several examples in this recipe, they share the same basic masking technique. We use a mask to exclude part of the image and then animate the mask’s scale until the image has been effectively removed.
Every view we create is backed by a layer, a graphic element that is directly drawn by the graphics processor. The layer behaves as an image store, allowing the view to be manipulated (moved, scaled, rotated) without the need to be redrawn. We can modify the layer properties directly, which gives us further options for modifying the presentation of the view. One of these properties is the mask property, which allows us to specify a second layer whose alpha channel will be used to mask the image of the layer. The alpha channel of an image specifies those areas that have varying levels of transparency, from 0 (Transparent) to 1 (Opaque). When a layer mask is added to the view, any sections of the mask image that are opaque display the original image, but any areas that are transparent or partially transparent show through some, or all, of the view that lies below (see Figure 6, The mask used for CircleFromCenter transition ).
Figure 6. The mask used for CircleFromCenter transition
* * *
We use predefined images to create the contents for the mask layer, each with different areas of opacity to help create the effect we are seeking. We then animate an increase in scale of the mask layer, effectively expanding its size, to completely cover the view and render it transparent.
The anchorPoint of the mask layer is extremely important. When we change the scale of the layer using a transform, the stretch effect will be centered around the anchorPoint, so our anchorPoint needs to match the center of the transparent portion of our mask. This gives the effect that the clear portion of the mask is expanding, resulting in the gradual reveal of the view below. (See Figure 7, The mask used for ClearFromCenter transition .)
Figure 7. The mask used for ClearFromCenter transition
* * *
In the viewDidLoad method, we add the copy of the Default.png image; this helps create the impression that the original splash screen has not been removed. To avoid using an UIImageView, we directly fill the contents of the view’s layer, while also setting the scale factor to match the device. To avoid the replacement image being offset by the status bar, set the contentMode to UIViewContentModeBottom; this keeps the image anchored to the bottom of the screen.
SplashScreenReveal/PRPSplashScreenViewController.m
- (void)viewDidLoad {
self.view.layer.contentsScale = [[UIScreen mainScreen] scale];
self.view.layer.contents = (id)self.splashImage.CGImage;
self.view.contentMode = UIViewContentModeBottom;
if (self.transition == 0) self.transition = ClearFromRight;
}
In the viewDidAppear: method we use a Switch statement to match the Enum to the transition type. We need adjust only two elements for each one: the mask image and the associated anchorPoint. The performSelector:withObject:afterDelay: method is useful here because it allows us to create a delay before we activate the animate method and start the transition.
SplashScreenReveal/PRPSplashScreenViewController.m
- (void)viewDidAppear:(BOOL)animated {
if ([self.delegate respondsToSelector:@selector(splashScreenDidAppear:)]) {
[self.delegate splashScreenDidAppear:self];
}
switch (self.transition) {
case CircleFromCenter:
self.maskImageName = @"mask";
self.anchor = CGPointMake(0.5, 0.5);
break;
case ClearFromCenter:
self.maskImageName = @"wideMask";
self.anchor = CGPointMake(0.5, 0.5);
break;
case ClearFromLeft:
self.maskImageName = @"leftStripMask";
self.anchor = CGPointMake(0.0, 0.5);
break;
case ClearFromRight:
self.maskImageName = @"RightStripMask";
self.anchor = CGPointMake(1.0, 0.5);
break;
case ClearFromTop:
self.maskImageName = @"TopStripMask";
self.anchor = CGPointMake(0.5,