【Swift5/Xcode】おしゃれな画面遷移ライブラリ『BubbleTransition』の使い方

動作環境

バージョンの確認方法

『BubbleTransition』とは

BubbleTransitionとはこのような、おしゃれな画面遷移が簡単に実装できるライブラリです。

BubbleTransitionの実装方法

簡単に手順を説明

1. ライブラリ導入
2. SegueでpresentModally接続
3. ViewControllerとNextViewControllerを変更←ここまでスキップ

ライブラリ導入

まずは、こちらの記事でをみながら、BubbleTransitionを導入してください。

【CocoaPods】超初心者向け！CocoaPodsのインストールの仕方と使い方を丁寧に解説

storyboardの実装

コードとストーリーボードを紐付ける

コーディング

続いて、コーディングします。

ViewControllerを以下のように、変更しましょう。

import UIKit
//追加①
import BubbleTransition

class ViewController: UIViewController {
    @IBOutlet weak var nextBtn: UIButton!

    //追加②
    let transition = BubbleTransition()

    override func viewDidLoad() {
        super.viewDidLoad()
 　　　　//追加③
        nextBtn.layer.cornerRadius = 30
        nextBtn.layer.masksToBounds = true
    }

    //追加④
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        let controller = segue.destination
        controller.transitioningDelegate = self
        controller.modalPresentationStyle = .custom
    }

}

//追加⑤
extension ViewController : UIViewControllerTransitioningDelegate {

    func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        transition.transitionMode = .present
        transition.startingPoint = nextBtn.center
        transition.bubbleColor = UIColor.systemYellow
        return transition
    }

    func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        transition.transitionMode = .dismiss
        transition.startingPoint = nextBtn.center
        return transition
    }
}

簡単に説明すると、

①まずは、インポートする

②インスタンスを生成する

③ボタンを丸くする

④画面遷移のセグエに設定する

⑤アニメーションを追加する

こんな感じです。

次は、NextViewControllerを変更しましょう。

import UIKit

class NextViewController: UIViewController {
    @IBOutlet weak var backBtn: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        //追加①
        backBtn.layer.cornerRadius = 30
        backBtn.layer.masksToBounds = true
    }
    
    @IBAction func backAction(_ sender: Any) {
        //追加②
        self.dismiss(animated: true, completion: nil)
    }
}

簡単に説明すると

①ボタンを丸くする

②画面遷移元に戻る処理

まとめ

他にもたくさんのSwiftの記事を書いていますので、読んでみてください！

あなたにおすすめの記事

【Swift5/Xcode】Xcodeショートカットキーのチートシート 【Swift5/Xcode】UIStackViewで簡単にトルツメを実装する方法(表示非表示切り替え)

iOSエンジニア必見

【17選】MacBook Pro/Air周辺機器のオススメのまとめ。〜作業を効率的かつおしゃれに〜

ブランドはじめました