web-dev-qa-db-ja.com

UIView垂直フリップアニメーション

UIViewAnimationTransitionFlipFromRightを含むiOS UIViewがあります。ただし、垂直に反転する必要があります。ページカールのトランジションではカットされません。これにはカスタムが必要だと思います。

何か案は？

iosuiviewcore-animation
47
Christian Schlensker

IOS 5.0では、垂直反転を行うために独自のコアアニメーション変換を記述する必要はありません。 UIKitの UIViewAnimationOptionTransitionFlipFromTopおよびUIViewAnimationOptionTransitionFlipFromBottom 遷移を使用するだけで、これらすべてが単一のメソッド呼び出しになります。

これらはUIViewAnimationOptionTransitionFlipFromLeftおよびUIViewAnimationOptionTransitionFlipFromRight（iOS 2.0以降で使用されています）と同様に動作します。

使用例：

[UIView transitionFromView:viewToReplace
                    toView:replacementView
                  duration:1
                   options:UIViewAnimationOptionTransitionFlipFromBottom
                completion:nil];

上記のコードは、viewToReplaceのスーパービューを垂直に反転します。アニメーションの途中で、スーパービューが画面に垂直になり、したがって不可視になる瞬間に、viewToReplaceはreplacementViewに置き換えられます。

とても簡単です。

34
Mark Amery

Core Animation Transformsを使用して、フリップのための独自のメソッドを書くだけです。

- (void)verticalFlip{
    [UIView animateWithDuration:someDuration delay:someDelay animations:^{
        yourView.layer.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0);
    } completion:^{
        // code to be executed when flip is completed
    }];
}

Core Animationライブラリ/フレームワークが追加および含まれていること、また含まれていることを確認してくださいmath.hを使用する場合はM_PI表記。

編集：

途中で反転したときにビューを本質的に「変更」するには、次のようにします。

- (void)verticalFlip{
    [UIView animateWithDuration:someDuration delay:someDelay animations:^{
        yourView.layer.transform = CATransform3DMakeRotation(M_PI_2,1.0,0.0,0.0); //flip halfway
    } completion:^{
        while ([yourView.subviews count] > 0)
            [[yourView.subviews lastObject] removeFromSuperview]; // remove all subviews
        // Add your new views here 
        [UIView animateWithDuration:someDuration delay:someDelay animations:^{
            yourView.layer.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0); //finish the flip
        } completion:^{
            // Flip completion code here
        }];
    }];
}

これも機能します：

- (void)verticalFlip{

    // Do the first half of the flip
    [UIView animateWithDuration:someDuration delay:someDelay animations:^{
        yourView.layer.transform = CATransform3DMakeRotation(M_PI_2,1.0,0.0,0.0); //flip halfway
    } completion:^{
        while ([yourView.subviews count] > 0)
            [[yourView.subviews lastObject] removeFromSuperview]; // remove all subviews
        // Add your new views here 
    }];

    // After a delay equal to the duration+delay of the first half of the flip, complete the flip
    [UIView animateWithDuration:someDuration delay:durationOfFirstAnimation animations:^{
        yourView.layer.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0); //finish the flip
    } completion:^{
        // Flip completion code here
    }];
}

乾杯。

66
Brenton Morse

Brentonからのコードは私には機能しなかったので、水平反転のためにApple docsと このコードの一部を見つけました をもう少し掘り下げました：

- (IBAction)toggleMainViews:(id)sender {
    [UIView transitionFromView:(displayingPrimary ? primaryView : secondaryView)
                        toView:(displayingPrimary ? secondaryView : primaryView)
                      duration:1.0
                       options:(displayingPrimary ? 
                                    UIViewAnimationOptionTransitionFlipFromRight :
                                    UIViewAnimationOptionTransitionFlipFromLeft)
                    completion:^(BOOL finished) {
                                   if (finished) {
                                       displayingPrimary = !displayingPrimary;
                                   }
                              }
    ];
}

オプションをUIViewAnimationOptionTransitionFlipFromRight : UIViewAnimationOptionTransitionFlipFromLeftからUIViewAnimationOptionTransitionFlipFromTop : UIViewAnimationOptionTransitionFlipFromBottomに変更することにより、垂直反転を行うことができます。

魅力のように働いた。

27
Miha Hribar

UIViewAnimationOptionTransitionFlipFromTopは使いやすいですが、UIViewAnimationOptionTransitionFlipFromTopを使用してインタラクティブなトランジションを作成することはできません。インタラクティブなトランジションを作成するには、レイヤーの変換を変更する必要があります。

CATransform3DMakeRotationを使用して変換を作成するだけでは不十分で、光の効果も遠近法もありません。これらの効果を追加するサンプルを作成します。インタラクティブなトランジションに簡単に変更できます。

デモ：

Flip effect

サンプルコード：

CALayer *sideALayer = sideAView.layer;
CALayer *sideBLayer = sideBView.layer;
CALayer *containerLayer = containerView.layer;

sideALayer.opacity = 1;
sideBLayer.opacity = 0;
sideBLayer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
containerLayer.transform = CATransform3DIdentity;

CATransform3D perspectiveTransform = CATransform3DIdentity;
perspectiveTransform.m34 = -1.0 / containerViewWidth;
[UIView animateKeyframesWithDuration:1 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{

    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.5 animations:^{
        sideALayer.opacity = 0;
        containerLayer.transform = CATransform3DConcat(perspectiveTransform,CATransform3DMakeRotation(M_PI_2, 0, 1, 0));
    }];
    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
        sideBLayer.opacity = 1;
        containerLayer.transform = CATransform3DConcat(perspectiveTransform, CATransform3DMakeRotation(M_PI, 0, 1, 0));
    }];
} completion:nil];

sideAViewとsideBViewはcontainerViewのサブビューです。

ContainerViewは黒の背景に設定されます。

7
BB9z

Swift 4.0バージョン 100％実用的なソリューション

// view1: represents view which should be hidden and from which we are starting
// view2: represents view which is second view or behind of view1
// isReverse: default if false, but if we need reverse animation we pass true and it
// will Flip from Left

func flipTransition (with view1: UIView, view2: UIView, isReverse: Bool = false) {
    var transitionOptions = UIViewAnimationOptions()
    transitionOptions = isReverse ? [.transitionFlipFromLeft] : [.transitionFlipFromRight] // options for transition

    // animation durations are equal so while first will finish, second will start
    // below example could be done also using completion block.

    UIView.transition(with: view1, duration: 1.5, options: transitionOptions, animations: {
        view1.isHidden = true
    })

    UIView.transition(with: view2, duration: 1.5, options: transitionOptions, animations: {
        view2.isHidden = false
    })
}

関数の呼び出し：

anim.flipTransition(with: viewOne, view2: viewTwo)
anim.flipTransition(with: viewTwo, view2: viewOne, isReverse: true)

ベストプラクティスは、UIView拡張機能を作成し、この機能をその拡張機能に保持して、UIView子オブジェクトにアクセスできるようにすることです。このソリューションは、completionBlockを使用して作成することもできます。

3
C0mrade

IViewに切り替えるには：

  -(void) goToSeconVC
 {
  SecondVC *secondVCObj = [[SecondVC alloc] init];
  [UIView beginAnimation: @”View Flip” context: nil];
  [UIView setAnimationDuration: 1.0];
  [UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
  [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight forView: self.navigationController.view cache: NO];
  [sef.navigationController pushViewController: seconVCObj animated: YES];
  [UIView commitAnimation];
 }
**To flip into a view controller:**
          viewController.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
         [self presentViewController:viewController animated:YES completion:nil];
**To flip out of it:**

[self dismissViewControllerAnimated:YES completion:nil];
0
Mannam Brahmam