Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to animate UIImageViews like hatch doors opening
    text
    copied!<p>I'm trying to create an animation that would look like 2 french doors (or 2 hatch doors) opening towards the user.</p> <p>I tried using the built in UIViewAnimationOptionTransitionFlipFromRight transition, but the origin of the transition seems to be the center of the UIImageView rather than the left edge. Basically I have 2 UIImageViews that each fill have the screen. I would like the animation to look like the UIImageViews are lifting from the center of the screen to the edges.</p> <pre><code>[UIView transitionWithView:leftView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^ { leftView.alpha = 0; } completion:^(BOOL finished) { [leftView removeFromSuperview]; }]; </code></pre> <p>Has anyone done something like this before? Any help would be awesome!</p> <p>UPDATE: Working code thanks to Nick Lockwood</p> <pre><code>leftView.layer.anchorPoint = CGPointMake(0, 0.5); // hinge around the left edge leftView.frame = CGRectMake(0, 0, 160, 460); //reset view position rightView.layer.anchorPoint = CGPointMake(1.0, 0.5); //hinge around the right edge rightView.frame = CGRectMake(160, 0, 160, 460); //reset view position [UIView animateWithDuration:0.75 animations:^{ CATransform3D leftTransform = CATransform3DIdentity; leftTransform.m34 = -1.0f/500; //dark magic to set the 3D perspective leftTransform = CATransform3DRotate(leftTransform, -M_PI_2, 0, 1, 0); leftView.layer.transform = leftTransform; CATransform3D rightTransform = CATransform3DIdentity; rightTransform.m34 = -1.0f/500; //dark magic to set the 3D perspective rightTransform = CATransform3DRotate(rightTransform, M_PI_2, 0, 1, 0); rightView.layer.transform = rightTransform; }]; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload