UIImageViewsをハッチドアのようにアニメーション化する方法

Question

私は、2つのフレンチドア（または2つのハッチドア）がユーザーに向かって開くようなアニメーションを作成しようとしています。

組み込みのUIViewAnimationOptionTransitionFlipFromRightトランジションを使用しようとしましたが、トランジションの起点が左端ではなくUIImageViewの中心にあるようです。基本的に私は2つのUIImageViewsを持って、それぞれの画面があります。私はUIImageViewsが画面の中央から端まで持ち上げているようにアニメーションを見たいと思います。

[UIView transitionWithView:leftView 
        duration:1.0 
        options:UIViewAnimationOptionTransitionFlipFromRight       
       animations:^ { leftView.alpha = 0; } 
       completion:^(BOOL finished) { 
        [leftView removeFromSuperview]; 
       }]; 

誰もこれまでのようなことをしましたか？どんな助けも素晴らしいだろう！

UPDATE：ニック・ロックウッドへ の作業コードのおかげ

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; 
}]; 

Answer 1

まずすべてのビューがアニメートされているサブプロパティを持つlayerプロパティを持つプロジェクトにQuartzCoreライブラリを追加し、#import <QuartzCore/QuartzCore.h>

。これは、アニメーション機能に関しては本当にクールなものがすべて見つかる場所です（設定可能なCALayerのクラスプロパティを読むことをお勧めします）。

とにかく、話題に戻る。ドアを3Dで回転させるには、ドアを閉じたかのように配置します。そのため、各ドアが画面の半分を満たすようにします。

leftDoorView.layer.anchorPoint = CGPoint(0, 0.5); // hinge around the left edge 
rightDoorView.layer.anchorPoint = CGPoint(1.0, 0.5); // hinge around the right edge 

は今、次のアニメーション

[UIView animateWithDuration:0.5 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); //rotate 90 degrees about the Y axis 
    leftDoorView.layer.transform = leftTransform; 
    //do the same thing but mirrored for the right door, that probably just means using -M_PI_2 for the angle. If you don't know what PI is, Google "radians" 
}]; 

を適用し、それはそれを行う必要があり、次のように

は今、自分のview.layer.anchorPointプロパティを設定します。

免責事項：私は実際にこれをテストしていないので、角度が逆である可能性があり、視点がねじれている可能性がありますが、少なくともそれは良いスタートでなければなりません。

更新：好奇心が私を良くしました。ここでは、完全に（これは左右のドアはnibファイル内の閉じた位置にレイアウトされていることを前提として）コードを働いている：

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 

    leftDoorView.layer.anchorPoint = CGPointMake(0, 0.5); // hinge around the left edge 
    leftDoorView.center = CGPointMake(0.0, self.view.bounds.size.height/2.0); //compensate for anchor offset 
    rightDoorView.layer.anchorPoint = CGPointMake(1.0, 0.5); // hinge around the right edge 
    rightDoorView.center = CGPointMake(self.view.bounds.size.width,self.view.bounds.size.height/2.0); //compensate for anchor offset 
} 

- (IBAction)open 
{ 
    CATransform3D transform = CATransform3DIdentity; 
    transform.m34 = -1.0f/500; 
    leftDoorView.layer.transform = transform; 
    rightDoorView.layer.transform = transform; 

    [UIView animateWithDuration:0.5 animations:^{ 

     leftDoorView.layer.transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0); 
     rightDoorView.layer.transform = CATransform3DRotate(transform, -M_PI_2, 0, 1, 0); 
    }]; 
} 

- (IBAction)close 
{ 
    [UIView animateWithDuration:0.5 animations:^{ 

     CATransform3D transform = CATransform3DIdentity; 
     transform.m34 = -1.0f/500; 
     leftDoorView.layer.transform = transform; 
     rightDoorView.layer.transform = transform; 
    }]; 
}