LoginSignup
21
22

More than 5 years have passed since last update.

Swift愛好会Advent Calendar 2016Day 8
@SatoTakeshiX(剛士 佐藤)

画像をシームレスに移動しながら画面遷移をしてみる。

Last updated at Posted at 2016-12-08

Swift愛好会 Advent Calendar 2016 8日目の投稿です。なにか皆さん技術の話をあまりしていない気がしますが、気にせず技術の話をします。

iPhoneの写真アプリのように

iOS_UIトレース会という勉強会を主催しています。iOSエンジニアが世にあるアプリのUIを真似たアプリを作っていって開発能力をアップしていこうという目的の勉強会です。

11月と12月のお題がGohobeeというアプリのご褒美画面を真似しようということになっていました。

とてもリッチな画面です。特徴を幾つかあげると

  • それぞれ異なるセルレイアウト
  • シームレスに次の画像が遷移
  • 遷移後画像がくるくるアニメーション
  • パララックススクロール

とたくさんあります。

すべてを真似するのはなかなか難しいと思い、シームレスに次の画像が遷移だけを真似しようかと思いました。

今回はiOS7から導入されたカスタムトランジションを利用して、画像をシームレスに移動しながら画面遷移をする方法を見てみたいと思います。

カスタムトランジション

iOSの画面遷移はiOS7から開発者カスタムができるようになりました。
仕組みとしては

  1. UIViewControllerAnimatedTransitioningプロトコルを適応したクラスを作る。このクラスでアニメーションを指定する
  2. UINavigationControllerのサブクラスを作って、UINavigationControllerDelegateに適応させる。navigationController(_:animationControllerFor:from:flag_to:)メソッドを実装。1のインスタンスを戻り値として返す。

です。

実装

今回はUINavigationControllerを使ったトランジションを実装していきたいと思います。
まず、UIViewControllerAnimatedTransitioningプロトコルを適応したクラスを作ります。


class Transition: NSObject, UIViewControllerAnimatedTransitioning {

    // pushなら　forward == true 
    var forward = false

    //アニメーションの時間
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.4
    }

    //アニメーションの定義
    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        if self.forward {
            //push時のアニメーション
            forwardTransition(transitionContext)
        } else {
            backwardTransition(transitionContext)
        }
    }

}

func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?)がアニメーションの時間を返します。今回は0.4秒にしました。
そして実際のアニメーションの操作をfunc animateTransition(using transitionContext: UIViewControllerContextTransitioning)で実装します。
今回はpushのときはforwardTransitionメソッド、backwardTransitionメソッドを実装しました。

forwardTransitionメソッド



    //push時のアニメーション
    fileprivate func forwardTransition (_ transitionContext: UIViewControllerContextTransitioning) {
        guard let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from) else {
            return
        }
        guard let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to) else {
            return
        }

        let containerView = transitionContext.containerView

        //遷移先のviewをaddSubViewする(fromVC.viewは最初からcontainerViewがsubviewとして持っている
        containerView.addSubview(toVC.view)


        //アニメーション用のimageViewを新しく作成する
        guard let sourceImageView = (fromVC as? ViewController)?.createImageView() else {
            return
        }

        guard let destinationImageView = (toVC as? DetailViewController)?.createImageView() else {
            return
        }

        //遷移先のimageViewをaddSubviewする
        containerView.addSubview(sourceImageView)
        toVC.view.alpha = 0.0

        //addSubViewでレイアウトが崩れるため再レイアウトする
        toVC.view.layoutIfNeeded()

        UIView.animate(withDuration: transitionDuration(using: transitionContext), delay: 0.05,
                       options: UIViewAnimationOptions.curveEaseIn,
                       animations: {

                        //アニメーション開始
                        // 遷移もとのimageViewのframeとconteModeを遷移先のimageViewに代入
                        sourceImageView.frame = destinationImageView.frame
                        sourceImageView.contentMode = destinationImageView.contentMode

                        // cellのimageViewを非表示にする
                        (fromVC as? SharedView)?.createImageView()?.isHidden = true

                        toVC.view.alpha = 1.0


        }, completion: {
            finished in

            //アニメーション終了
            transitionContext.completeTransition(true)
        })
    }

push時のソースです。
画面遷移中はtransitionContext.containerViewという特殊なコンテナビューの上で操作されます。
これは最初から遷移元のビュー(transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from))がaddSubViewされている状態です。

そこに、遷移中にシームレスに移動させる画像、sourceImageViewを取得して、それをアニメーションします。
最後にtransitionContext.completeTransition(true)を実行します。これはシステムに画面遷移を知らせるメソッドです。
忘れると画面先のビューの状態がおかしくなるのでアニメーションが終わった段階で呼ぶようにします。

戻るときのアニメーションは以下のようにしました。

    //pop時のアニメーション
    fileprivate func backwardTransition(_ transitionContext: UIViewControllerContextTransitioning) {
        // Pushと逆のアニメーション
        guard let fromeVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from) else {
            return
        }

        guard let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to) else {
            return
        }

        let containerView = transitionContext.containerView

        //前回遷移したさいのImageViewが残っているので一度全てを外す
        containerView.subviews.forEach {
            view in
            view.removeFromSuperview()
        }

        // toView -> fromViewの順にaddSubView
        containerView.addSubview(toVC.view)
        containerView.addSubview(fromeVC.view)

        guard let sourceImageView = (fromeVC as? DetailViewController)?.createImageView() else {
            return
        }

        guard let destinationImageView = (toVC as? ViewController)?.createImageView() else {
            return
        }

        //戻るときに一度ViewControllerのcellのimageViewを非表示にする
        guard let viewController = toVC as? ViewController, let cell = viewController.collectionView.cellForItem(at: viewController.selectedIndexPath!) as? CollectionViewCell  else {
            return
        }

        cell.imageView.isHidden = true

        containerView.addSubview(sourceImageView)
        containerView.layoutIfNeeded()

        UIView.animate(withDuration: transitionDuration(using: transitionContext), delay: 0.05, options: UIViewAnimationOptions.curveEaseIn,
                       animations: {
                        sourceImageView.frame = destinationImageView.frame

                        fromeVC.view.alpha = 0.0

        }, completion: {
            finished in
            sourceImageView.isHidden = true

            (toVC as? ViewController)?.selectedImageView?.isHidden = false
            cell.imageView.isHidden = false
            sourceImageView.removeFromSuperview()
            fromeVC.view.removeFromSuperview()
            transitionContext.completeTransition(true)
        })
    }

基本的にpush時と逆のアニメーション同じですが、注意としてtransitionContext.containerViewのサブビューに対して一度全てビュー階層から外しています。


//前回遷移したさいのImageViewが残っているので一度全てを外す
containerView.subviews.forEach {
    view in
    view.removeFromSuperview()
}

transitionContext.containerViewはシングルトンのようで、遷移をするたびに同じオブジェクトが使われるようにです。
なので、遷移する際にaddSubviewをすると次回遷移するときにそのビューが残ってしまうようです。

UINavigationControllerにカスタムトランジションできるようにする

UINavigationControllerのサブクラスを作って作ったTransitionクラスのインスタンスのアニメーションになるように設定します。
UINavigationControllerDelegateを適応します。
そしてUINavigationControllerDelegateのnavigationController(_:animationControllerFor:from:to:)にTransitionクラスのインスタンスを返すようにします。

class TransitionNavigationController: UINavigationController, UINavigationControllerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.delegate = self 

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func navigationController(_ navigationController: UINavigationController,
                              animationControllerFor operation: UINavigationControllerOperation,
                              from fromVC: UIViewController,
                              to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        let transition = Transition()
        switch operation {
        case .push:
             transition.forward = true
            return transition
        case .pop:
            transition.forward = false
            return transition
        default:
            return nil

        }


    }

}

これで画像をシームレスに移動しながら画面遷移ができます。

完成品

ソース

Githubにあげています。
https://github.com/SatoTakeshiX/SwiftSharedViewTransition

参考

21
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
21
22