ios - ビュー間でスワイプ/スライドアニメーションを実装するにはどうすればよいですか?

Question

iOS プログラムでスワイプしたいビューがいくつかあります。現在、モーダルスタイルとクロスディゾルブアニメーションを使用して、それらの間をスワイプしています。ただし、ホーム画面などで見られるようなスワイプ/スライドアニメーションが必要です。このようなトランジションをコーディングする方法がわかりません。また、アニメーションスタイルは利用可能なモーダルトランジションスタイルではありません。誰でもコードの例を教えてもらえますか? モーダルモデルなどである必要はありません。それが最も簡単だと思いました。

score 36 · Accepted Answer

iOS 7 以降、2 つのビューコントローラー間のトランジションをアニメーション化する場合は、WWDC 2013 ビデオCustom Transitions Using View Controllersで説明されているように、カスタムトランジションを使用します。たとえば、新しいビューコントローラーの表示をカスタマイズするには、次のようにします。

宛先ビューコントローラーは、プレゼンテーションアニメーションのself.modalPresentationStyleとを指定します。transitioningDelegate

- (instancetype)initWithCoder:(NSCoder *)coder {
    self = [super initWithCoder:coder];
    if (self) {
        self.modalPresentationStyle = UIModalPresentationCustom;
        self.transitioningDelegate = self;
    }
    return self;
}

このデリゲート (この例ではビューコントローラー自体) は、以下に準拠しUIViewControllerTransitioningDelegateて実装します。

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
                                                                   presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
    return [[PresentAnimator alloc] init];
}

// in iOS 8 and later, you'd also specify a presentation controller

- (UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source {
    return [[PresentationController alloc] initWithPresentedViewController:presented presentingViewController:presenting];
}

目的のアニメーションを実行するアニメーターを実装します。

@interface PresentAnimator : NSObject <UIViewControllerAnimatedTransitioning>

@end

@implementation PresentAnimator

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext {
    return 0.5;
}

// do whatever animation you want below

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
    UIViewController* toViewController   = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIViewController* fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];

    [[transitionContext containerView] addSubview:toViewController.view];
    CGFloat width = fromViewController.view.frame.size.width;
    CGRect originalFrame = fromViewController.view.frame;
    CGRect rightFrame = originalFrame; rightFrame.origin.x += width;
    CGRect leftFrame  = originalFrame; leftFrame.origin.x  -= width / 2.0;
    toViewController.view.frame = rightFrame;

    toViewController.view.layer.shadowColor = [[UIColor blackColor] CGColor];
    toViewController.view.layer.shadowRadius = 10.0;
    toViewController.view.layer.shadowOpacity = 0.5;

    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
        fromViewController.view.frame = leftFrame;
        toViewController.view.frame = originalFrame;
        toViewController.view.layer.shadowOpacity = 0.5;
    } completion:^(BOOL finished) {
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
    }];
}

@end

また、ビュー階層をクリーンアップするプレゼンテーションコントローラーも実装します。この場合、表示ビューを完全にオーバーレイしているため、遷移が完了したら階層から削除できます。
```
@interface PresentationController: UIPresentationController
@end

@implementation PresentationController

- (BOOL)shouldRemovePresentersView {
    return true;
}

@end
```
オプションで、このジェスチャをインタラクティブにしたい場合は、次のことも行います。
- インタラクションコントローラ (通常はUIPercentDrivenInteractiveTransition) を作成します。
- UIViewControllerAnimatedTransitioningも実装してくださいinteractionControllerForPresentation。これは明らかに前述の対話コントローラーを返します。
- を更新するジェスチャ (または何を持っているか) を持っています。interactionController

これはすべて、前述のビューコントローラを使用したカスタムトランジションで説明されています。

ナビゲーションコントローラーのプッシュ/ポップのカスタマイズの例については、「ナビゲーションコントローラーのカスタム遷移アニメーション」を参照してください。

以下に、カスタムトランジションより前の私の元の回答のコピーを見つけてください。

@sooperの答えは正しいです.CATransitionはあなたが探している効果を生み出すことができます.

しかし、ところで、背景が白でない場合、トランジションkCATransitionPushのCATransition最後に奇妙なフェードインとフェードアウトが発生し、気が散る可能性があります (特に、画像間を移動するときは、わずかにちらつき効果が発生します)。 . これに苦しんでいる場合は、この単純な移行が非常に優雅であることがわかりました。「次のビュー」を画面の右端に配置するように準備し、現在のビューを画面の左端に移動しながら同時にアニメーション化することができます。次のビューをアニメーション化して、現在のビューがあった場所に移動します。私の例では、単一のView Controller内でメインビューの内外でサブビューをアニメーション化していますが、おそらく次のアイデアを得るでしょう：

float width = self.view.frame.size.width;
float height = self.view.frame.size.height;

// my nextView hasn't been added to the main view yet, so set the frame to be off-screen

[nextView setFrame:CGRectMake(width, 0.0, width, height)];

// then add it to the main view

[self.view addSubview:nextView];

// now animate moving the current view off to the left while the next view is moved into place

[UIView animateWithDuration:0.33f 
                      delay:0.0f 
                    options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
                 animations:^{
                     [nextView setFrame:currView.frame];
                     [currView setFrame:CGRectMake(-width, 0.0, width, height)];
                 }
                 completion:^(BOOL finished){
                     // do whatever post processing you want (such as resetting what is "current" and what is "next")
                 }];

明らかに、コントロールをすべて設定するには、これを微調整する必要がありますが、これにより、非常に単純な遷移が得られ、フェードなどはなく、非常にスムーズな遷移が得られます。

警告: まず、この例も例もCATransition、SpringBoard のホーム画面のアニメーション (あなたが話した) とはまったく似ていません。なんでもいい）。これらの遷移は、一度開始するとすぐに発生する遷移です。リアルタイムの対話が必要な場合は、それも可能ですが、違います。

アップデート：

UIPanGestureRecognizerユーザーの指を追跡する連続ジェスチャを使用する場合は、ではなく使用できます。その場合よりも優れているUISwipeGestureRecognizerと思います。ユーザーのジェスチャーに合わせて座標を変更するように変更し、ユーザーが手放したときにアニメーションを完了するように上記のコードを変更しました。かなりうまく機能します。そう簡単にできるとは思えません。animateWithDurationCATransitionhandlePanGestureframeCATransition

たとえば、コントローラーのメインビューでジェスチャハンドラーを作成できます。

[self.view addGestureRecognizer:[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)]];

ハンドラーは次のようになります。

- (void)handlePan:(UIPanGestureRecognizer *)gesture
{
    // transform the three views by the amount of the x translation

    CGPoint translate = [gesture translationInView:gesture.view];
    translate.y = 0.0; // I'm just doing horizontal scrolling

    prevView.frame = [self frameForPreviousViewWithTranslate:translate];
    currView.frame = [self frameForCurrentViewWithTranslate:translate];
    nextView.frame = [self frameForNextViewWithTranslate:translate];

    // if we're done with gesture, animate frames to new locations

    if (gesture.state == UIGestureRecognizerStateCancelled ||
        gesture.state == UIGestureRecognizerStateEnded ||
        gesture.state == UIGestureRecognizerStateFailed)
    {
        // figure out if we've moved (or flicked) more than 50% the way across

        CGPoint velocity = [gesture velocityInView:gesture.view];
        if (translate.x > 0.0 && (translate.x + velocity.x * 0.25) > (gesture.view.bounds.size.width / 2.0) && prevView)
        {
            // moving right (and/or flicked right)

            [UIView animateWithDuration:0.25
                                  delay:0.0
                                options:UIViewAnimationOptionCurveEaseOut
                             animations:^{
                                 prevView.frame = [self frameForCurrentViewWithTranslate:CGPointZero];
                                 currView.frame = [self frameForNextViewWithTranslate:CGPointZero];
                             }
                             completion:^(BOOL finished) {
                                 // do whatever you want upon completion to reflect that everything has slid to the right

                                 // this redefines "next" to be the old "current",
                                 // "current" to be the old "previous", and recycles
                                 // the old "next" to be the new "previous" (you'd presumably.
                                 // want to update the content for the new "previous" to reflect whatever should be there

                                 UIView *tempView = nextView;
                                 nextView = currView;
                                 currView = prevView;
                                 prevView = tempView;
                                 prevView.frame = [self frameForPreviousViewWithTranslate:CGPointZero];
                             }];
        }
        else if (translate.x < 0.0 && (translate.x + velocity.x * 0.25) < -(gesture.view.frame.size.width / 2.0) && nextView)
        {
            // moving left (and/or flicked left)

            [UIView animateWithDuration:0.25
                                  delay:0.0
                                options:UIViewAnimationOptionCurveEaseOut
                             animations:^{
                                 nextView.frame = [self frameForCurrentViewWithTranslate:CGPointZero];
                                 currView.frame = [self frameForPreviousViewWithTranslate:CGPointZero];
                             }
                             completion:^(BOOL finished) {
                                 // do whatever you want upon completion to reflect that everything has slid to the left

                                 // this redefines "previous" to be the old "current",
                                 // "current" to be the old "next", and recycles
                                 // the old "previous" to be the new "next". (You'd presumably.
                                 // want to update the content for the new "next" to reflect whatever should be there

                                 UIView *tempView = prevView;
                                 prevView = currView;
                                 currView = nextView;
                                 nextView = tempView;
                                 nextView.frame = [self frameForNextViewWithTranslate:CGPointZero];
                             }];
        }
        else
        {
            // return to original location

            [UIView animateWithDuration:0.25
                                  delay:0.0
                                options:UIViewAnimationOptionCurveEaseOut
                             animations:^{
                                 prevView.frame = [self frameForPreviousViewWithTranslate:CGPointZero];
                                 currView.frame = [self frameForCurrentViewWithTranslate:CGPointZero];
                                 nextView.frame = [self frameForNextViewWithTranslate:CGPointZero];
                             }
                             completion:NULL];
        }
    }
}

これは、目的の UX に対しておそらく定義するこれらの単純なframeメソッドを使用します。

- (CGRect)frameForPreviousViewWithTranslate:(CGPoint)translate
{
    return CGRectMake(-self.view.bounds.size.width + translate.x, translate.y, self.view.bounds.size.width, self.view.bounds.size.height);
}

- (CGRect)frameForCurrentViewWithTranslate:(CGPoint)translate
{
    return CGRectMake(translate.x, translate.y, self.view.bounds.size.width, self.view.bounds.size.height);
}

- (CGRect)frameForNextViewWithTranslate:(CGPoint)translate
{
    return CGRectMake(self.view.bounds.size.width + translate.x, translate.y, self.view.bounds.size.width, self.view.bounds.size.height);
}

特定の実装は間違いなく異なりますが、うまくいけば、これはアイデアを示しています。

このすべてを説明したので（この古い回答を補足して明確にする）、私はこの手法をもう使用しないことを指摘する必要があります。現在、私は一般的に a UIScrollView(「ページング」をオンにして) または (iOS 6 の場合) a を使用していUIPageViewControllerます。これにより、この種のジェスチャハンドラーを作成する必要がなくなります (スクロールバーやバウンスなどの追加機能を楽しむこともできます)。実装では、必要なサブビューを遅延ロードしていることを確認するUIScrollViewために、イベントに応答するだけです。scrollViewDidScroll

score 9 · Accepted Answer

CATransitionアニメーションを作成できます。現在のビューを押し出しているときに、2番目のビュー（左から）を画面にスライドさせる方法の例を次に示します。

UIView *theParentView = [self.view superview];

CATransition *animation = [CATransition animation];
[animation setDuration:0.3];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromLeft];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

[theParentView addSubview:yourSecondViewController.view];
[self.view removeFromSuperview];

[[theParentView layer] addAnimation:animation forKey:@"showSecondViewController"];

score 8 · Accepted Answer

ページを切り替えるときにスプリングボードと同じページスクロール/スワイプ効果が必要な場合は、単にUIScrollView?

CGFloat width = 320;
CGFloat height = 400;
NSInteger pages = 3;

UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0,0,width,height)];
scrollView.contentSize = CGSizeMake(width*pages, height);
scrollView.pagingEnabled = YES;

そして、UIPageControlこれらのドットを取得するために使用します。:)

ios - ビュー間でスワイプ/スライド アニメーションを実装するにはどうすればよいですか?

3 に答える 3

Related

Reference

ios - ビュー間でスワイプ/スライドアニメーションを実装するにはどうすればよいですか?