Sequential UIView Transform

Question

I've got a question about applying multiple transforms to an UIView. When I animate a rotation of an UIView around it's center point, for example, and then try to rotate it around a point that lies outside it's bounds after that, the second animation is all messed up, e.g. it jitters around or rotates in a completely different way than specified. How can I make it so that the first animation doesn't influence the second, but is still present when the second one is played?

EDIT: Here's the code. First I rotate the view around it's center point:

CALayer *layer = view.layer;

CATransform3D aTransform = CATransform3DIdentity;
CGFloat zDistance = 2000;
aTransform.m34 = 1.0 / -zDistance;  
scrollView.layer.sublayerTransform = aTransform;

CGFloat subviewX = 0.5;
CGFloat subviewY = 0.5;
[self setAnchorPoint:CGPointMake(subviewX, subviewY) forView:view];

CATransform3D bTransform = CATransform3DIdentity;  
CABasicAnimation *rotateAnim = [CABasicAnimation animationWithKeyPath:@"transform"];  
rotateAnim.fromValue= [NSValue valueWithCATransform3D:bTransform];
bTransform = CATransform3DRotate(aTransform,-20*M_PI/180, 1, 1, 0);
rotateAnim.duration=0.05;
rotateAnim.toValue=[NSValue valueWithCATransform3D:bTransform];
layer.transform = bTransform;
[layer addAnimation:rotateAnim forKey:nil];

Now that the layer is rotated, I want to flip it around the left screen border:

CALayer *layer = view.layer;

CATransform3D aTransform = CATransform3DIdentity;
CGFloat zDistance = 2000;
aTransform.m34 = 1.0 / -zDistance;  
tileScrollView.layer.sublayerTransform = aTransform;

CGFloat subviewX = ((1/view.frame.size.width)*(view.frame.origin.x));
CGFloat subviewY = 0.5;
[self setAnchorPoint:CGPointMake(-subviewX, subviewY) forView:view];

CATransform3D bTransform = layer.transform;
CABasicAnimation *rotateAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
rotateAnim.fromValue= [NSValue valueWithCATransform3D:bTransform];
bTransform = CATransform3DMakeRotation(-M_PI_2, 0, 1, 0);
rotateAnim.duration=0.2;
rotateAnim.toValue=[NSValue valueWithCATransform3D:bTransform];
layer.transform = bTransform;
[layer addAnimation:rotateAnim forKey:nil];

Since I want the rotated layer to be flipped around, I put CATransform3D bTransform = layer.transform instead of CATransform3D bTransform = CATransform3DIdentity at the beginning of the second animation, but again, that only messes the animation up

Another, similar problem I have is that I have an UIView that contains 9 subViews, one of which flips around it's center point every second. But every time I apply a transformation to the superView of those 9 UIViews, the layout of the subViews gets messed up. Does anyone know how to prevent this? Any help would be greatly appreciated. Thanks in advance!

Answer 1

Two things:

1. In the first transform, you do this:

   bTransform = CATransform3DRotate(aTransform,-20*M_PI/180, 1, 1, 0);
   

   meaning that you rotate around an axis that is 45° between the x and y axis. That might be what you're trying to do, but it seems strange. Consider changing to

   bTransform = CATransform3DRotate(aTransform,-20*M_PI/180, 0, 1, 0);
   

2. In the second step, if you just want to add the transform onto the current transform (i.e. rotate another 180°), you need to change this line

   bTransform = CATransform3DMakeRotation(-M_PI_2, 0, 1, 0);
   

   to

   bTransform = CATransform3DRotate(bTransform, -M_PI_2, 0, 1, 0);
   

   This applies the transformation to the existing transform, instead of ignoring the current transform.