Question

Here’s the basic code to get started with:

[UIView transitionWithView:self.view duration:2.0
                   options:UIViewAnimationOptionBeginFromCurrentState
                animations:^ {         

                    CALayer *layer1 = leftband.layer;
                    layer1.anchorPoint = CGPointMake(0, 0.5);
                    CATransform3D rotationAndPerspectiveTransform1 = CATransform3DIdentity;
                    rotationAndPerspectiveTransform1.m34 = 1.0 / -500;
                    rotationAndPerspectiveTransform1 = CATransform3DRotate(rotationAndPerspectiveTransform1, DegreesToRadians(-180.0f), 0.0f, 1.0f, 0.0f);
                    layer1.transform = rotationAndPerspectiveTransform1;

                    CALayer *layer2 = rightband.layer;
                    layer2.anchorPoint = CGPointMake(0, 0.5);
                    CATransform3D rotationAndPerspectiveTransform2 = CATransform3DIdentity;
                    rotationAndPerspectiveTransform2.m34 = 1.0 / -500;
                    rotationAndPerspectiveTransform2 = CATransform3DRotate(rotationAndPerspectiveTransform2, DegreesToRadians(180.0f), 0.0f, 1.0f, 0.0f);
                    layer2.transform = rotationAndPerspectiveTransform2;
                }
                completion:nil {

                }];

leftband and rightband are two UIImageViews. The effect I want is that the leftband animates with its transform along the Y-axis towards the left direction. And the rightband does the same along its Y-axis towards the right.

But the above code results in both left and right imageviews animating in the same direction (it happens only towards left). I guess my understanding of anchor points is wrong. Both -180° and +180° in the rotation transform result in a leftward animation.

What am I doing wrong here?

Answer 1

Basically setting the anchor points before the animation block runs solves the issue. Anchor point for left -> (0.0f,0.5f) and for right -> (1.0f,0.5f).