13

Using the following UIView animation with CATransform3DMakeRotation, half the UIView will disappear during the transform and re-appear on completion. This only happens when theres a UIImageView behind the UIView in the view hierarchy of interface builder.

[UIView animateWithDuration:1.0 delay:0.0 options:nil animations:^{
        myView.layer.transform = CATransform3DMakeRotation(M_PI,0.0,1.0,0.0);
    } completion:nil];

The following is the view layout in interface builder

Interface Builder layout

And the animation result below.

enter image description here

The 2nd image is before any animation has taken place, the left half disappears. After it has shrunk then grown past the center point the right side (previous left side) reappears as shown in 4th image.

When the background image is set using

self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"jeans.png"]];

The animation completes as expected.

Leon Storey
  • 3,274
  • 2
  • 25
  • 40
  • This also works fine when there's no UIImageView behind. – Leon Storey Oct 29 '12 at 21:58
  • Please explain what you are trying to achieve... From the images, I see that this is a normal behavior, since you are rotating on the y-axis – Mazyod Oct 29 '12 at 22:04
  • The middle 2 images are at the very start and end of the animation, such as soon as the animation starts the left side disappears before any change in width. Only reappearing after the animation has completed. If that makes it clearer? – Leon Storey Oct 29 '12 at 22:07
  • 1
    Perhaps try setting `imageView.layer.zPosition = -400`? Let me know if this works... – joerick Oct 29 '12 at 22:08
  • Yes that solved it! Thanks, what difference did that make? I guess it put it into 3D space? – Leon Storey Oct 29 '12 at 22:11

1 Answers1

32

For the record, the answer was in my comment

imageView.layer.zPosition = -400;

Alternatively you could do

myView.layer.zPosition = 400; // or some number greater than width/2

It looks like part of the rotating view is occluded by the background view. Since it rotates around its center point, part of it passes into negative-z space, so is behind the background.

So from

------- imageView
------- myView

to

     / myView
    /
------- imageView
  /
 /
joerick
  • 16,078
  • 4
  • 53
  • 57