How do I stack images to simulate depth using Core Animation?
Posted
by Jeffrey Berthiaume
on Stack Overflow
See other posts from Stack Overflow
or by Jeffrey Berthiaume
Published on 2010-05-14T14:41:29Z
Indexed on
2010/05/14
17:34 UTC
Read the original article
Hit count: 261
iphone
|core-animation
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.
© Stack Overflow or respective owner