visibility (overlapping) problems with CABasicAnimation CALayer transformations

Question

I have two UIImageViews on my object, and I'm trying to animate them to page like a book. I used some of the built in animations for a while (UIViewAnimationTransitionFlipFromLeft/Right), and decided I could do better. I found a nice example for half of the animation I wanted here: http://fiftysixtysoftware.com/blog/2009/uiview-pageopen-sample-project/

I was able to extrapolate from there to get my animation working... but the problem I'm having is that my animating image (the right image) always shows up beneath the left image.

Here's code in the init:

// set up some rects for use later
landscapeLeftRect = CGRectMake(0, 12, 512, 725);
landscapeRightRect = CGRectMake(512, 12, 512, 725);

// all our images
imageLeft = [[UIImageView alloc] initWithFrame:portraitRect];
imageRight = [[UIImageView alloc] initWithFrame:landscapeRightRect];

...and performing the actual animation (note that this is the second half of the animation, the half that "overlaps" with my imageLeft view):

// set the image to be nextLeft
//[imageRight setImage:image.nextLeft];
[self.view sendSubviewToBack:imageLeft];
[self.view bringSubviewToFront:imageRight];
//[imageRight.layer setZPosition:1.0f];
[imageRight setFrame:landscapeLeftRect];

// remove any previous animations
[imageRight.layer removeAllAnimations];

// set up the anchorPoint and center
if (imageRight.layer.anchorPoint.x != 1.0f) {
    imageRight.layer.anchorPoint = CGPointMake(1.0f, 0.5f);
    imageRight.center = CGPointMake(imageRight.center.x + imageRight.bounds.size.width/2.0f, imageRight.center.y);
}

// create an animation to hold the first half of the page turning forward
CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
transformAnimation.removedOnCompletion = YES;
transformAnimation.duration = 0.40f;
transformAnimation.delegate = self;
transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
// start the animation from the current state
CATransform3D endTransform = CATransform3DMakeRotation(3.141f/2.0f,
                                                       0.0f,
                                                       -1.0f,
                                                       0.0f);
// these values control the 3D projection outlook
endTransform.m34 = -0.001f;
endTransform.m14 = 0.0015f;
transformAnimation.fromValue = [NSValue valueWithCATransform3D:endTransform];
// we should end up at the beginning...
transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];

[imageRight.layer addAnimation:transformAnimation forKey:nil];

Things I've tried: (you can see both in the code above)

• bringSubviewToFront/sendSubviewToBack
• setting a Z index on the layer

Thanks in advance for any advice or wisdom. Again, the problem is with my imageLeft always displaying on top of the animation.

Answer 1

I have the same problem... Any help?

Answer 2

I found that once I brought the animated view to the front, everything worked. I am working on a page turn animation and was having trouble when paging backwards showing the page overlay in a counterclockwise fashion. My trouble was that I just couldn't see the animation since it was behind the page it was supposed to overlay.

Answer 3

Are you sure that you are iterating through the array correctly when adding the page view to the superview? Naturally, you would want to put the last page down first so that your first page is on top... I'm not insulting your intelligence - layers can be tricky.