How to rotate an UIImageView with CATransform3DRotate make an effect like Door Opening? - iphone

Question

I've read and try this article (Opening door effect using Core Animation)
And I implement following code in my app:
CALayer *layer = threeHomeView.layer;
CATransform3D initialTransform = threeHomeView.layer.transform;
initialTransform.m34 = 1.0 / -900;
[UIView beginAnimations:#"Scale" context:nil];
[UIView setAnimationDuration:3];
layer.transform = initialTransform;
CATransform3D rotationAndPerspectiveTransform = threeHomeView.layer.transform;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform
, 40.0f * M_PI / 180.0f
, 0.0f
, 1.0f
, 0.0f);
layer.transform = rotationAndPerspectiveTransform;
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(threeHomeFlyOut)];
[UIView commitAnimations];
threeHomeView is an UIImageView.
MY QUESTION IS: the image can only rotate by middle vertical line of the image, but I want it to rotate by left vertical line of the image.

Answer 1

Use CATransform3DRotate like you did in combination with CATransform3DTranslate to rotate around the edge, like I did in this answer. Here's a little excerpt (you will need to modify this for your own uses):
CATransform3D t = CATransform3DIdentity;
t = CATransform3DTranslate(t, 0, -self.view.bounds.size.height/2, 0);
t = CATransform3DRotate(t, rec.scale * M_PI, 1, 0, 0);
t = CATransform3DTranslate(t, 0, -self.view.bounds.size.height/2, 0);
self.view.layer.transform = t;

Answer 2

- (void)awakeFromNib {
transformed = [CALayer layer];
transformed.frame = self.bounds;
[self.layer addSublayer:transformed];
CALayer *imageLayer = [CALayer layer];
imageLayer.frame = CGRectMake(10.0f, 4.0f, 300.0f, 226.0f);
imageLayer.transform = CATransform3DMakeRotation(20.0f * M_PI / 180.0f,
1.0f, 0.0f, 0.0f);
imageLayer.contents = (id)[[UIImage imageNamed:#"IMG_0051.png"] CGImage];
[transformed addSublayer:imageLayer];
imageLayer = [CALayer layer];
imageLayer.frame = CGRectMake(10.0f, 234.0f, 300.0f, 226.0f);
imageLayer.transform = CATransform3DMakeRotation(-20.0f * M_PI / 180.0f,
1.0f, 0.0f, 0.0f);
imageLayer.contents = (id)[[UIImage imageNamed:#"IMG_0089.png"] CGImage];
[transformed addSublayer:imageLayer];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
previousLocation = [[touches anyObject] locationInView:self];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
CGPoint location = [[touches anyObject] locationInView:self];
// BJL: The following is the code I used in Molecules to do 3-D rotation
CATransform3D currentTransform = transformed.sublayerTransform;
CGFloat displacementInX = location.x - previousLocation.x;
CGFloat displacementInY = previousLocation.y - location.y;
CGFloat totalRotation = sqrt(displacementInX * displacementInX + displacementInY * displacementInY);
CATransform3D rotationalTransform = CATransform3DRotate(currentTransform, totalRotation * M_PI / 180.0,
((displacementInX/totalRotation) * currentTransform.m12 + (displacementInY/totalRotation) * currentTransform.m11),
((displacementInX/totalRotation) * currentTransform.m22 + (displacementInY/totalRotation) * currentTransform.m21),
((displacementInX/totalRotation) * currentTransform.m32 + (displacementInY/totalRotation) * currentTransform.m31));
previousLocation = location;
transformed.sublayerTransform = rotationalTransform;
}