Today I'm glad to introduce you how I implement a simple 3D Cube transition with Core Animation on iPhone. As the matter of fact, I always think that Mac's 3D Cube Transition used for user account switch is really an amazing view switch effect, but since there isn't one I can use on iPhone, at least I didn't find one, I decided to implement it by myself. To make it easier to be integrated in my code, I followed the sample of TransitionView provided by Apple, and implement a new TransitionView with 3D Cube Transition.
For better format, you can access
our blog site
Check how
3D Cube effect work
Customized TransitionView
Like iPhone TransitionView sample, my TransitionView can be used as a parent view for all views which are going to be switched in or switched out, so all subviews will be added or removed along with a 3D Cube transition, all you need to do is set direction and duration parameters.
To help you clearly understand how it works, I'd like to use a example to illustrate it. The example is very simple, it has two views, we can click "NEXT" button on view one to jump to view two along with 3D Cube transition. You will be able to see what it looks like with your simulator.
Source Code
The code for this sample is available on Google Code. You can use svn to checkout it and compile it with Xcode 3.0.
svn checkout
cubetransition - Revision 4: /trunk cubetransition-read-only
After check out the source code, and launch the demo app in simulator, you can watch the 3D effect by clicking NEXT and then BACK button.
3D Cube Transition
The idea for implementing 3D effect is pretty simple. Firstly, we need to figure out a way to construct a 3D model structure once the new added view need to replace the old view, after we construct a 3D layer model, we need to calculate the target position of x, y, z and degrees need to rotate, then commit the transition and wait for transition finished. In animation finish callback, we need also to recover TransitionView and finally add the new
view in it. So let me show you how to do it.
Construct 3D model structure
Since iPhone Core Animation don't support rotate a non image layer, so firstly, we have to capture current old view and new view and generate a CGImage, in this example, I capture image for old view evevrytime, you can decided to cache the image for later use.
Capture view as image
Code:
- (id) captureView:(UIView *)view isMasked:(BOOL)aIsMasked
{
UIGraphicsBeginImageContext(view.frame.size);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
if (aIsMasked) {
CGContextSetRGBFillColor (UIGraphicsGetCurrentContext(), 0, 0, 0, MASKALPHA);
CGContextFillRect (UIGraphicsGetCurrentContext(), view.frame);
}
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return (id) [newImage CGImage];
}
captureView is used to generate a image regarding current graphic context. note: isMasked is used to indicate if we want to gray the view to indicate the change.
Construct transformed layer
Code:
transformed = [CALayer layer];
transformed.frame = self.bounds;
transformed.anchorPoint = CGPointMake(0.5f, 0.5f);
CATransform3D sublayerTransform = CATransform3DIdentity;
/* Set perspective */
sublayerTransform.m34 = 1.0 / -1000;
[transformed setSublayerTransform:sublayerTransform];
[self.layer addSublayer:transformed];
//init Sublayers
CATransform3D t = CATransform3DMakeTranslation(0, 0, 0);
[transformed addSublayer:[self makeSurface:t withView:mySubView isMasked:aIsMasked]];
[mySubView setHidden:YES];
if (aDirection == RTOL)
{
t = CATransform3DRotate(t, radians(90), 0, 1, 0);
t = CATransform3DTranslate(t, CUBESIZE, 0, 0);
[transformed addSublayer:[self makeSurface:t withView:aNewView isMasked:aIsMasked]];
}
- (id) captureView:(UIView *)view isMasked:(BOOL)aIsMasked{UIGraphicsBeginImageContext(view.frame.size);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];if (aIsMasked) { CGContextSetRGBFillColor (UIGraphicsGetCurrentContext(), 0, 0, 0, MASKALPHA); CGContextFillRect (UIGraphicsGetCurrentContext(), view.frame);}UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();return (id) [newImage CGImage];
}
Firstly, we need to create a layer for transform, this layer is main layer of 3D rotation, we also need to initialize 3D 4-by-4 matrix by setting CATransform3DIdentity. Then we need to set perspective, this is a very important step. Applying the 3D perspective relies on a poorly-documented feature of Core Animation’s CATransform3D structure, a 4-by-4 matrix used to perform matrix transformations. Apple’s documentation says that changes to CATransform3D.m34 “affect the sharpness of the transform.” For our purposes, this means “make things look 3D”. Till now, we have create the main layer and set perspective, then we need to set anchor, when we rotate the transformed layer, we need to follow anchor to rotate, so anchor is used for it, before SDK 3.0, we can only set anchor at x,y axis, in 3.0, we are able to set anchor on z axis, in this example, we will still set anchor on x,y axis, which means we need do some specially steps to under the change on z axis, we will talk about it later. Now, we need to place the captured view images on its position, the first view is placed at the default position, that means all its position x, y, z are 0, and it don't have any initial rotate. The second view need to be placed in a 3D space, so we need to rotate this layer 90 degree along with Y axis, then we need to place it an x=330, y=0, z=0. So now, we have constructed 2 faces of a cube, and that is enough to do 3D transition.
Rotate transformed layer
Code:
CAAnimationGroup *group = [CAAnimationGroup animation];
group.delegate = self;
group.duration = aDuration;
translationX = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.x"];
translationX.toValue = [NSNumber numberWithFloat:-(CUBE_VERTICAL_WIDTH / 2)];
rotation = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.rotation.y"];
rotation.toValue = [NSNumber numberWithFloat:radians(-90)];
translationZ = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.translation.z"];
translationZ.toValue = [NSNumber numberWithFloat:-(CUBE_VERTICAL_WIDTH / 2)];
group.animations = [NSArray arrayWithObjects: rotation, translationX, translationZ, nil];
[transformed addAnimation:group forKey:kAnimationKey];
Firstly, we need to create a CAAnimationGroup, the reason we create it is because we need use about 3 transitions to change layers position together. The first transition we use is change the layer's x position, if we don't change it, a half of cube will be rotated outside screen. The second transition we use is rotate the layer by 90 degree. The third transition we used is change the layer's z position, if we don't change it, the cube will become more closed to screen. Note, we change all position info based on key-value mechanism. After we created the group of transition, we added the transitions to the transformed layer, and then it will automatically rotate the layers in 3D space.
Handle transitions status
Handle transitions status is very important for view switch, in this example, we removed the old view after the transition is started, and add the new view after the transition is stopped. With those status and status handling, we can formally finish view switch.
Conculsion
That is all about 3D cube transition, it is very easy to be adopted and very efficient, you can also refer to the code in example to see how to use it in the real world.
3D Cube View Transition On iPhone
Linear Mode
