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

ios_ui

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

sample

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

SebastianBoldt/Jelly

検証環境

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

Xcode 8.2.1
Swift 3.0.2
CocoaPods 1.2.0

準備

導入

CocoaPodsで追加します。

platform :ios, '9.0'
use_frameworks!

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

画面遷移の作成

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

Main_storyboard

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

Main_storyboard

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

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にサンプルが載っているので参考にすると良いと思います。

サンプルコード

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)

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

custom

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

プロパティ名 説明 デフォルト値
duration 遷移アニメーションの時間 .ultraSlow = 2.0
.slow = 1.0
.medium = 0.5
.normal = 0.35
.fast = 0.2
.reallyFast = 0.1
normal
backgroundStyle 背景のスタイル .dimmed(alpha: CGFloat)
.blur(effectStyle: UIBlurEffectStyle)
※ 透明な背景を使いたい場合は .dimmed(alpha:0.0)にする
.dimmed(0.5)
cornerRadius 遷移先画面の角丸 Double 0
corners 角丸にする位置 UIRectCorner .allCorners
presentationCurve
dismissCurve
アニメーションカーブ .easeIn
.easeOut
.easeInEaseOut
.linear
.linear
isTapBackgroundToDismissEnabled 背景(透過部分)タップで閉じるかどうか true = 閉じる
false = 閉じない
true
widthForViewController
heightForViewController
画面サイズ .fullscreen = 全画面
.halfscreen = 半分のサイズ
.custom(value: CGFloat)
.fullscreen
horizontalAlignment 画面の横位置 .center
.left
.right
.center
verticalAlignemt 画面の縦位置 .center
.top
.bottom
.center
marginGuards 余白 UIEdgeInsets .zero
directionShow
directionDismiss
アニメーションの方向 .left
.top
.bottom
.right
.top
jellyness ゼリー? .none (damping = 1.0, velocity = 0.0)
.jelly (damping = 0.7, velocity = 2)
.jellier (damping = 0.5 , velocity = 3)
.jelliest (damping = 0.2, velocity = 4)
.none

さいごに

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

コメントは受け付けていません。