How do I stack images to simulate depth using Core Animation?
- by Jeffrey Berthiaume
I have a series of UIImages with which I need to simulate depth. I can't use scaling because I need to be able to rotate the parent view, and the images should look like they're stacked visibly in front of each other, not on the same plane.
I made a new ViewController-based project and put this in the viewDidLoad (as well as attached three 120x120 pixel images named 1.png, 2.png, and 3.png):
- (void)viewDidLoad {
// display image 3
UIImageView *three = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"3.png"]];
three.center = CGPointMake(160 + 60, 240 - 60);
[self.view addSubview:three];
// rotate image 3 around the z axis
// THIS IS INCORRECT
CATransform3D theTransform = three.layer.transform;
theTransform.m34 = 1.0 / -1000;
three.layer.transform = theTransform;
// display image 2
UIImageView *two = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"2.png"]];
two.center = CGPointMake(160, 240);
[self.view addSubview:two];
// display image 1
UIImageView *one = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.png"]];
one.center = CGPointMake(160 - 60, 240 + 60);
[self.view addSubview:one];
// rotate image 3 around the z axis
// THIS IS INCORRECT
theTransform = one.layer.transform;
theTransform.m34 = 1.0 / 1000;
one.layer.transform = theTransform;
// release the images
[one release];
[two release];
[three release];
// rotate the parent view around the y axis
theTransform = self.view.layer.transform;
theTransform.m14 = 1.0 / -500;
self.view.layer.transform = theTransform;
[super viewDidLoad];
}
I have very specific reasons why I'm not using an EAGLView and why I'm not loading the images as CALayers (i.e. why I'm using UIImageViews for each one). This is just a quick demo that I can use to work out exactly what I need in my parent application.
Is there some matrix way to translate these 2d images along the z-axis so they will look like what I'm trying to represent? I've gone through the other StackOverflow articles as well as the Wikipedia references, and have not found what I'm looking for -- although I might not necessarily be using the right terms for what I'm trying to do.
