【Swift 3】UINavigationControllerを用いた画面遷移のアニメーション変更【CATransition】

どもども
以前書いた「【Swift 3】UIPageViewControllerとUINavigationControllerを使ってスワイプで画面切り替えをしよう」の続きのような続きじゃないような感じの記事になります。

UINavigationControllerを用いると画面遷移のアニメーションはスライドして切り替わるやつになります。pushかな。

 

このアニメーションをフェードなどの別のアニメーションに変更します。

 

UINavigationControllerのカスタムクラスを作ろう

前の記事で書いてることは割愛させていただきます。

pushのアニメーションを変更する場合はUINavigationControllerのカスタムクラスに以下のように書くとアニメーションを変更できます。

    override func pushViewController(_ viewController: UIViewController, animated: Bool) {
        //もともとのアニメーションを削除
        self.view.layer.removeAllAnimations()
        if(animated){
            //新しいアニメーションをつける
            let transition:CATransition = CATransition()
            transition.duration = 0.25
            transition.type = kCATransitionMoveIn
            transition.subtype = kCATransitionFromTop
            self.view.layer.add(transition,forKey:kCATransition)
        }
        return super.pushViewController(viewController, animated: false)
    }

 

popの場合も同様

    override func popViewController(animated: Bool) -> UIViewController? {
        //もともとのアニメーションを削除
        self.view.layer.removeAllAnimations()
        if(animated){
            //新しいアニメーションをつける
            let transition:CATransition = CATransition()
            transition.duration = 0.25
            transition.type = kCATransitionMoveIn
            transition.subtype = kCATransitionFromTop
            self.view.layer.add(transition,forKey:kCATransition)
        }
        return super.popViewController(animated: false)
    }

 

popToRootViewController(animated:)等を使うときも同様です。

 

アニメーションの種類は transition.typeで設定できますが

・Fade
・MoveIn
・Push
・Reveal

の4種類です

 

transition.subtypeはどちら側からアニメーションをするかを設定できます。
こちらも

・FromLeft
・FromRight
・FromTop
・FromBottom

と4種類から設定できます。
durationはアニメーションにかかる時間です。

詳しくはTransition Animationでどうぞ。

 

 

わざわざこんなのを作ったり

カーソルが挙動不審すぎる

 

全部コード載せようと思ったのですが、重要なのは上記コードぐらいですし、ストーリボードも一応使っているのでコードだけで載せるのはなぁと思うのでとりあえず保留。

そのうちgithub使えるようになったらそっちに載せてリンク貼りますね・・・・。

とりあえず今は自分用メモという感じで使おうと思います。

 

オーバーライドしちゃうと全部がそのアニメーションになってしまうので部分的に変えたい場合は条件分岐すると場所によって違うアニメーションができます。

 

 

ではでは。

 

 

2018/04/14追記
Swift4でチェック済みでっす

Comments...

コメントは認証制です。詳しくは下記の注意をお読みください。お気軽にコメントお願いします!

Write a Comment

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

Related Memo...

UITableView.RowAnimation の .none はアニメーションするよ

UITableView.RowAnimation の .none はアニメーションがnoneなわけじゃなく、デフォルトの設定を使うよという意味らしい。

The inserted or deleted rows use the default animations.

なのでアニメーションしちゃう。今更の気づき。

 

iOS

UINavigationController + UIScrollView の組み合わせで使っている時に謎の余白ができる時

UINavigationController + UIScrollView の組み合わせで使っていて、UIScrollView 上に AutoLayout で上下左右0で View を設置しているのに、30px程度上にずれてしまうとき。

`navigationController.navigationBar.isTranslucent = false` にすると直るかもしれない。

ScrollView上のコンテンツとNavigationBarの重なっているところが透過していたら多分これで直せるはず。

通常のターゲットではちゃんと動いているのに、iOSSnapshotTestCase を用いたテストでだけこの対応が必要なのよくわからないけれど。。。

iOS

記事を書くほどでもないけれどメモっておきたいこと

テスト投稿。

例えばiphone7 の画面サイズ

750 × 1334
半分375 × 667

iOS
more