[iOS] 遷移元の画像が遷移先にズームイン・アウトするような画面遷移(UITableView及びUICollectionViewの場合)

#iPhone

#iOS

SIN

2017.03.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

テーブルビューやコレクションビューに一覧されている写真などを選択すると、ズームして表示されるような画面遷移を試してみました。

最初に、実行しているようすです。

2 画面遷移のカスタマイズ

present modallyで画面遷移をカスタマイズする手順は、下記のとおりです。

遷移を表現するクラスを作成　UIViewControllerAnimatedTransitioning
1.を指定するdelegateクラスを作成　UIViewControllerTransitioningDelegate
遷移先ビューのtransitioningDelegateに、2.を設定する

今回は、1.及び2.を実装したクラスCustomTransitionを作成しました。

class CustomTransition: NSObject, UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning {
    // ・・・・
}

(1) UIViewControllerTransitioningDelegate

UIViewControllerTransitioningDelegateプロトコルを実装したクラスでは、animationController(forPresented:presenting:source:)及びanimationController(forDismissed:)を実装し、それぞれ、遷移と復帰の処理を実装したクラスを返します。

サンプルでは、遷移か復帰かのフラグをセットし、自分自身を返しています。

// MARK: - UIViewControllerTransitioningDelegate
public func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    isPresent = true
    return self
}

public func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    isPresent = false
    return self
}

(2) UIViewControllerAnimatedTransitioning

UIViewControllerAnimatedTransitioningプロトコル実装したクラスでは、遷移にかかる時間を返すtransitionDuration(using:)と、遷移時のアニメーション等（本体）animateTransition(using:)が必要です。

// MARK: - UIViewControllerAnimatedTransitioning
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
    return 0.7
}

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
    if isPresent {
        presentTransition(transitionContext: transitionContext)
    } else {
        dissmissalTransition(transitionContext: transitionContext)
    }
}

遷移処理の本体は、presentTransition(transitionContext:)に、復帰処理の本体は、dissmissalTransition(transitionContext:)によれぞれ実装しました。

3 ズーム処理

ズームでの登場人物は次の５人です。
① ズーム前のイメージ
② アニメーション用のイメージ
③ ズーム後のイメージ
④ 遷移前のビュー
⑤ 遷移後のビュー

001

そして、この登場人物でズームの手順を簡単に表現すると次のようになります。

⑤「遷移後のビュー」を非表示にする
①「ズーム前のイメージ」から②「アニメーション用イメージ」を作成する
④「遷移元のビュー」から①「ズーム前のイメージ」だけを非表示にする
②「アニメーション用イメージ」を、ズーム前のサイズからズーム後のサイズにアニメーションさせる
⑤「遷移後のビュー」を表示する
②「アニメーション用イメージ」を削除する

遷移の本体を実装するanimateTransition(using:)のパラメータであるUIViewControllerContextTransitioningからは、遷移前のビューコントローラー及び遷移後のビューコントローラーが取得可能なので、この２つから、上記の登場人物を芋づる式に引っ張り出してきて操作します。

func presentTransition(transitionContext: UIViewControllerContextTransitioning) {

    // 遷移元ビューコントローラー
    let firstViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from) as! FirstViewController
    // 遷移先ビューコントローラー
    let secondViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to) as! SecondViewController

4 ズームイン

先の手順を実装したものです。ちょっとややこしいのは、セルを取得するところぐらいでしょうか。

// 遷移時のTrastion処理
func presentTransition(transitionContext: UIViewControllerContextTransitioning) {

    // 遷移元、遷移先及び、遷移コンテナの取得
    let firstViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from) as! FirstViewController
    let secondViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to) as! SecondViewController
    let containerView = transitionContext.containerView

    // 遷移元のセルの取得

    let cell:CollectionViewCell = firstViewController.collectionView?.cellForItem(at: (firstViewController.collectionView?.indexPathsForSelectedItems?.first)!) as! CollectionViewCell
    // 遷移元のセルのイメージビューからアニメーション用のビューを作成
    let animationView = UIImageView(image: cell.photoView.image)
    animationView.frame = containerView.convert(cell.photoView.frame, from: cell.photoView.superview)
    // 遷移元のセルのイメージビューを非表示にする
    cell.photoView.isHidden = true

    //遷移後のビューコントローラーを、予め最後の位置まで移動完了させ非表示にする
    secondViewController.view.frame = transitionContext.finalFrame(for: secondViewController)
    secondViewController.view.alpha = 0
    // 遷移後のイメージは、アニメーションが完了するまで非表示にする
    secondViewController.photoView.isHidden = true

    // 遷移コンテナに、遷移後のビューと、アニメーション用のビューを追加する
    containerView.addSubview(secondViewController.view)
    containerView.addSubview(animationView)

    UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
        // 遷移後のビューを徐々に表示する
        secondViewController.view.alpha = 1.0
        // アニメーション用のビューを、遷移後のイメージの位置までアニメーションする
        animationView.frame = containerView.convert(secondViewController.photoView.frame, from: secondViewController.view)
    }, completion: {
        finished in
        // 遷移後のイメージを表示する
        secondViewController.photoView.isHidden = false
        // セルのイメージの非表示を元に戻す
        cell.photoView.isHidden = false
        // アニメーション用のビューを削除する
        animationView.removeFromSuperview()
        transitionContext.completeTransition(true)
    })
}

5 ズームアウト

ズームアウトの処理も、ズームインと殆ど同じです。

// 復帰時のTrastion処理
func dissmissalTransition(transitionContext: UIViewControllerContextTransitioning) {
    // 遷移元、遷移先及び、遷移コンテナの取得
    let secondViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from) as! SecondViewController
    let firstViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to) as! FirstViewController
    let containerView = transitionContext.containerView

    // 遷移元のイメージビューからアニメーション用のビューを作成
    let animationView = secondViewController.photoView.snapshotView(afterScreenUpdates: false)
    animationView?.frame = containerView.convert(secondViewController.photoView.frame, from: secondViewController.photoView.superview)
    // 遷移元のイメージを非表示にする
    secondViewController.photoView.isHidden = true

    // 遷移先のセルを取得
    let cell:CollectionViewCell = firstViewController.collectionView?.cellForItem(at: secondViewController.indexPath) as! CollectionViewCell

    // 遷移先のセルのイメージを非表示
    cell.photoView.isHidden = true

    //遷移後のビューコントローラーを、予め最後の位置まで移動完了させ非表示にする
    firstViewController.view.frame = transitionContext.finalFrame(for: firstViewController)

    // 遷移コンテナに、遷移後のビューと、アニメーション用のビューを追加する
    containerView.insertSubview(firstViewController.view, belowSubview: secondViewController.view)
    containerView.addSubview(animationView!)

    UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
        // 遷移元のビューを徐々に非表示にする
        secondViewController.view.alpha = 0
        // アニメーションビューは、遷移後のイメージの位置まで、アニメーションする
        animationView?.frame = containerView.convert(cell.photoView.frame, from: cell.photoView.superview)
    }, completion: {
        finished in
        // アニメーション用のビューを削除する
        animationView?.removeFromSuperview()
        // 遷移元のイメージの非表示を元に戻す
        secondViewController.photoView.isHidden = false
        // セルのイメージの非表示を元に戻す
        cell.photoView.isHidden = false
        transitionContext.completeTransition(true)
    })
}

コードは下記に置きました。気になるところが有りましたら、ぜひ教えてやってください。

[GitHub] https://github.com/furuya02/CustomTransitionSample02