[iOS][Swift3.0] UIViewControllerのトランジションを手軽にカスタマイズできるJelly

今回は、手軽にUIViewControllerのトランジションをカスタマイズできるJellyを試してみました。 下記は同じ画面を呼び出していますが、呼び出し先の画面サイズやトランジションを変えているため、受ける印象はだいぶ違うのではないでしょうか？

JellyのライセンスはMITです。

SebastianBoldt/Jelly

検証環境

今回は下記環境で試しています。

準備

導入

CocoaPodsで追加します。

platform :ios, '9.0'
use_frameworks!

target 'ここにターゲット名' do
    pod 'Jelly'
end

画面遷移の作成

モーダルでページの遷移を出来るように画面を作っておきます。 Storyboardに呼び出し元と呼び出し先のViewControllerを置きます。呼び出し先の方には閉じるボタンを付けています。

また、呼び出し先の画面にはStoryboardIDを付けておきます。

呼び出し元の方にボタンを配置してタップしたら、呼び出し先画面を表示するようにします。

ViewController.swift

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBAction func didTapButton(_ sender: Any) {
        let viewController = storyboard?.instantiateViewController(withIdentifier: "SecondView")
        present(viewController!, animated: true, completion: nil)
    }
}

実装

準備が終わったら呼び出し元のコードに追記します。

Jellyをインポートします。

import Jelly

アニメーション用の変数を用意します。

var jellyAnimator: JellyAnimator?

遷移する処理に下記を加えます。

@IBAction func didTapButton(_ sender: Any) {
    let viewController = storyboard?.instantiateViewController(withIdentifier: "SecondView")
    let presentation = JellyFadeInPresentation()
    jellyAnimator = JellyAnimator(presentation:presentation)
    jellyAnimator?.prepare(viewController: viewController!)
    present(viewController!, animated: true, completion: nil)
}

遷移の種類

Jellyでは遷移の種類として下記があります。

• JellyFadeInPresentation()
• JellyShiftInPresentation()
• JellySlideInPresentation()

アニメーションの動きとしてはGithubのReadme.mdにサンプルが載っているので参考にすると良いと思います。

サンプルコード

ViewController.swift

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBAction func didTapButton(_ sender: Any) {
        let viewController = storyboard?.instantiateViewController(withIdentifier: "SecondView")
        let presentation = JellyFadeInPresentation()
        jellyAnimator = JellyAnimator(presentation:presentation)
        jellyAnimator?.prepare(viewController: viewController!)
        present(viewController!, animated: true, completion: nil)
    }
}

実行結果

JellyFadeInPresentationを選んでいるのでふわっとしたトランジションです。

カスタマイズについて

Jellyでは遷移のカスタマイズをすることが出来ます。たとえば、

let presentation = JellyFadeInPresentation()

の部分を

let presentation = JellyFadeInPresentation(dismissCurve: .easeInEaseOut,
                                presentationCurve: .easeIn,
                                cornerRadius: 6,
                                backgroundStyle: .blur(effectStyle: .light),
                                duration: .medium,
                                widthForViewController: .fullscreen,
                                heightForViewController: .halfscreen,
                                marginGuards: .zero,
                                corners: .allCorners)

とすると、以下のようになります。

種類によって設定できるものは異なりますが、Readme.mdを見るとプロパティとしては以下のものがある様です。

さいごに

遷移する際にコードを追加するだけで遷移のアニメーションが変えられるのは便利ではないでしょうか。個人的にはデザインをカスタマイズしたアラート画面を作ったりする時に活用できそうな気がしました。