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 faced the same problem and just found that you can fix it by setting the zPosition of the view.
I used something like this:

viewThatShouldBeSentToTheBack.layer.zPosition=-10000;