A custom modal transition that presents and dismiss a controller with an expanding bubble effect.

Overview

CocoaPods Carthage compatible Swift 5.0 codebeat badge

A custom modal transition that presents and dismiss a controller inside an expanding and shrinking bubble.

Screenshot

BubbleTransition

Usage

Install through CocoaPods:

pod 'BubbleTransition', '~> 3.2.0'

use_frameworks!

Install through Carthage:

github "andreamazz/BubbleTransition"

Install through Swift Package Manager:

To integrate using Xcode:

File -> Swift Packages -> Add Package Dependency...

Enter package URL: https://github.com/andreamazz/BubbleTransition, and select the latest release.

Setup

Have your view controller conform to UIViewControllerTransitioningDelegate. Set the transitionMode, the startingPoint, the bubbleColor and the duration.

let transition = BubbleTransition()

public override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
  let controller = segue.destination
  controller.transitioningDelegate = self
  controller.modalPresentationCapturesStatusBarAppearance = true
  controller.modalPresentationStyle = .custom
}

// MARK: UIViewControllerTransitioningDelegate

public func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
  transition.transitionMode = .present
  transition.startingPoint = someButton.center
  transition.bubbleColor = someButton.backgroundColor!
  return transition
}

public func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
  transition.transitionMode = .dismiss
  transition.startingPoint = someButton.center
  transition.bubbleColor = someButton.backgroundColor!
  return transition
}

You can find the Objective-C equivalent here.

Swipe to dismiss

You can use an interactive gesture to dismiss the presented controller. To enable this gesture, prepare the interactive transition:

let interactiveTransition = BubbleInteractiveTransition()

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
  if let controller = segue.destination as? ModalViewController {
    controller.transitioningDelegate = self
    controller.modalPresentationStyle = .custom
    controller.modalPresentationCapturesStatusBarAppearance = true
    controller.interactiveTransition = interactiveTransition
    interactiveTransition.attach(to: controller)
  }
}

and implement interactionControllerForDismissal in your presenting controller:

func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
  return interactiveTransition
}

In the presented controller make sure to call finish() on the interactive gesture if you need to quickly dismiss from a button press instead. Check the sample code for more info.

You can decide the gesture threshold and the swipe direction:

interactiveTransition.interactionThreshold = 0.5
interactionThreshold.swipeDirection = .up

Properties

var startingPoint = CGPointZero

The point that originates the bubble.

var duration = 0.5

The transition duration.

var transitionMode: BubbleTranisionMode = .present

The transition direction. Either .present, .dismiss or .pop.

var bubbleColor: UIColor = .white

The color of the bubble. Make sure that it matches the destination controller's background color.

Checkout the sample project for the full implementation.

Author

Andrea Mazzini. I'm available for freelance work, feel free to contact me.

Want to support the development of these free libraries? Buy me a coffee ☕️ via Paypal.

Contributors

Thanks to everyone kind enough to submit a pull request.

MIT License

Copyright (c) 2018-2020 Andrea Mazzini. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Comments
  • Black background color on dismiss transition (Objective-C only)

    Black background color on dismiss transition (Objective-C only)

    func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        transition.transitionMode = .Dismiss
        transition.startingPoint = transitionButton.center
        transition.bubbleColor = transitionButton.backgroundColor!
        return transition
    }
    

    ios simulator screen shot 25 2015 19 40 51

    Demo project, tested on simulator iOS8.3/iOS8.4 and on iPhone 5s iOS8.4

    bug help wanted 
    opened by slxl 26
  • Transition lag?

    Transition lag?

    Hello @andreamazz ,

    First of thanks for the great work. Library works awesome.

    I'm not sure if my problem is directly linked to bubbleTransition, but I'm noticing a lag on the FIRST button press. From there on after, its smooth as butter.

    Note: The startingPoint is incorrect because it appears somewhere on the top though I don't think its CGPointZero but a little under the navigation bar and centered horizontally. This is weird because I specified it as below and that button is at the bottom of the screen. I'm not sure if the button lagged without bubbleTransition.

    @IBOutlet var starButton: SpringButton! 
    

    I create the segue using storyboard and just do:

    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
        if segue.identifier == "feedback" {
            let controller = segue.destinationViewController
            controller.transitioningDelegate = self
            controller.modalPresentationStyle = .Custom
        }
    }
    

    extension ViewController: UIViewControllerTransitioningDelegate {

    func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        transition.transitionMode = .Present
        transition.startingPoint = starButton.center
        transition.bubbleColor = UIColor(red: 245.0/255.0, green: 192.0/255.0, blue: 24.0/255.0, alpha: 1)
        return transition
    }
    
    func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        transition.transitionMode = .Dismiss
        transition.startingPoint = starButton.center
        transition.bubbleColor = UIColor(red: 245.0/255.0, green: 192.0/255.0, blue: 24.0/255.0, alpha: 1)
        return transition
    }
    

    }

    opened by acegreen 23
  • destinationViewController's autolayout doesn't work.

    destinationViewController's autolayout doesn't work.

    Hi, friend! Thanks for you great work. Here is a problem. The destinationViewController's autolayout doesn't work after I user BubbleTransition to present it.

    qq20160307-2 2x ↑ my storyboard qq20160307-1 2x ↑ devise screen.

    Can you give me some ideas?

    Thanks!

    stale 
    opened by bianjingbulb 16
  • How can I use this as a menu?

    How can I use this as a menu?

    I would like to use this as a modal menu for presenting options to the user. Something like:

    unnamed

    Can you please give me an idea of how I can achieve this?

    wontfix 
    opened by AbdullahAli 8
  • transition.startingPoint = BubbleBtn.center does not work

    transition.startingPoint = BubbleBtn.center does not work

    I am using the button inside my Navbar like:

    Right bar button -> bar button items -> BubbleBtn

    But when I set: transition.startingPoint = BubbleBtn.center it will make the transition start form the very top right corner of my screen:

    dis

    How can I make it start from the center of the button?

    opened by kiwo12345 7
  • Is it possible to accept gesture while animating?

    Is it possible to accept gesture while animating?

    Hi, thanks for sharing the great work. It works well on my project, but my project needs the ability to keep accepting gestures of the user, wondering if this can be done with Bubble Transition?

    opened by s951736 6
  • Animation Controller for Dismissed Not work in iOS 9.3 & iOS 12

    Animation Controller for Dismissed Not work in iOS 9.3 & iOS 12

    Thanks to the author for the great library, very easy to use, however I can not run the dismissal effect on ios 9.3 and ios 12. Please check again. Thank you.

    opened by bauloc 6
  • Objective-C instructions

    Objective-C instructions

    Hi! Your work is amazing however, i am not into Swift. I imported your file, created the necessary bridging header and everything compiles, however i don't know how to "activate" the transition and use the delegates. Could you please provide an objective-c example? Thanks in advance.

    opened by magnett 6
  • self.transitioningDelegate not retained

    self.transitioningDelegate not retained

    Hi,

    I'm running into a problem where transitioningDelegate is set the VC is presented with the custom transition but at some point, the transitioningDelegate is nil and so when its dismissed, the transition is the regular dismiss one.

    I understand that transitioningDelegate is a weak property but the VC is not deinit'd as I retain a reference to it in my presenting VC

    Note 1: when I check transitioningDelegate in the viewDidLoad() of the presented VC, its the assigned BubbleTransitionDelegate class as expected, but when I'm about to dismiss it, transitioningDelegate is nil

    Note 2: the only thing I can think of that I'm doing differently, is that I'm extending UIViewController to have a new present(bubble VC)() method as such:

    extension UIViewController {
        func present( bubble viewController: UIViewController, from target: UIView?, presentingColor: UIColor = OMColor.red, dismissingColor: UIColor = OMColor.white, completion: (() -> ())?) {
            
            let bubbleTransitionDelegate = BubbleTransitionDelegate(target: target, presentingColor: presentingColor, dismissingColor: dismissingColor)
    
            viewController.transitioningDelegate = bubbleTransitionDelegate
            viewController.modalPresentationStyle = .custom
            
            self.present(viewController, animated: true) { 
                completion?()
            }
        }
    }
    
    opened by acegreen 5
  • It is possible to use this library to add child view controller to a container view?

    It is possible to use this library to add child view controller to a container view?

    I want to add as a child view controller to a container view; is this possible? Because when present a view controller it is displayed on the top above all the other content.

    question 
    opened by Senocico 4
  • Cannot use BubbleInteractiveTransition

    Cannot use BubbleInteractiveTransition

    Thanks for this library! But after I added it to my project using cocoapods, I can't use BubbleInteractiveTransition class. However, I can use BubbleTransition. And I checked "BubbleTransition.swift" file, it seems that there is no BubbleInteractiveTransition class at all. I don't why this happens.

    opened by lyx0124 4
  •  Unbalanced calls to begin/end appearance transitions for

    Unbalanced calls to begin/end appearance transitions for

    The warning "The unbalanced calls to begin/end appearance transitions" seems to occur on my UINavigationViewController when i tries to present another controller.

    help wanted 
    opened by arqambutt 6
  • Improvement: Add a background image for the bubble as an alternative of bubbleColor

    Improvement: Add a background image for the bubble as an alternative of bubbleColor

    Hello,

    First of all, thank you for sharing your work, it's great!

    I would like to know if you ever considered adding an optional UIImage to be used as a bubble background?

    It would be a nice improvement I feel.

    Cordially,

    help wanted Easy 
    opened by LouisBorlee 4
Releases(3.1.1)
Owner
Andrea Mazzini
💻 Software Engineer 🌲 Woodworker
Andrea Mazzini
SPLarkController - Custom transition between controllers. Settings controller for your iOS app.

SPLarkController About Transition between controllers to top. You can change animatable height after presentation controller. For presentation and dis

Ivan Vorobei 965 Dec 17, 2022
Use PanGesture to dismiss view on UIViewController and UIView

PanSlip Use PanGesture to dismiss view on UIViewController and UIView. Introduction PanSlip to UIViewController left to right right to left top to bot

DongHee Kang 101 Dec 10, 2022
This component implements transition animation to crumble view-controller into tiny pieces.

StarWars Animation This component implements transition animation to crumble view-controller into tiny pieces. Check this project on dribbble. Also, r

Yalantis 3.7k Dec 29, 2022
Custom interactive transition like Apple Music iOS App (iOS 9). written in Swift.

MusicPlayerTransition Custom interactive transition like Apple Music iOS App. written in Swift. Demo See demo on Appetize.io Using Transition Animator

Airin 642 Nov 17, 2022
Simple and elegant Dropdown Transition

Simple and elegant dropdown transition for iOS Why? I needed to perform the dropdown transition in the app I was building and I've found many great li

Aidar Nugmanoff 63 Sep 22, 2022
Elegant transition library for iOS & tvOS

Hero is a library for building iOS view controller transitions. It provides a declarative layer on top of the UIKit's cumbersome transition APIs—makin

Hero Transitions 21.2k Jan 3, 2023
This is a Swift based demo project to show how to make the transition Pinterest liked.

PinterestSwift Compatible with Xcode 11 / Swift 5.0 This is a Swift based demo project to show how to make the transition Pinterest 2.0+ liked. Refer

Nicholas Tau 1.9k Dec 20, 2022
Now playing controller from Apple Music, Mail & Podcasts Apple's apps.

SPStorkController About Controller as in Apple Music, Podcasts and Mail apps. Help if you need customize height or suppport modal style in iOS 12. Sim

Ivan Vorobei 2.6k Jan 4, 2023
A simple way to create custom interactive UIViewController transitions

EasyTransitions is a library that helps developers create custom interactive transitions using simple functions defined in a protocol and avoid handli

Marcos Griselli 1.6k Jan 1, 2023
Easy interactive interruptible custom ViewController transitions

Introduction Transition is a library that helps you build iOS view controller transitions. Implementing a nice interactive custom view controller tran

Touchwonders 2.6k Dec 20, 2022
Painless custom transitioning. Easy extend, easy setup, just focus on animations.

TransitionManager Painless custom transitioning. Easy extend, easy setup, just focus on animations. Installation CocoaPods You can use CocoaPods to in

Cem Olcay 205 Aug 23, 2022
🌊 - Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexible API.

Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexibl

Sebastian Boldt 2.4k Dec 25, 2022
A Splash view that animates and reveals its content, inspired by Twitter splash

RevealingSplashView A Splash view that animates and reveals its content, inspired by the Twitter splash. ⭐ Features Customizable reveal icon image. Cu

Chris Jimenez 1.2k Jan 4, 2023
A custom modal transition that presents a controller with an expanding effect while sliding out the presenter remnants.

DAExpandAnimation A custom modal transition that presents a controller with an expanding effect while sliding out the presenter remnants. Screenshot I

Denis Avdeev 578 Nov 29, 2022
Vahesaroyan-react-native-bubble-select - React native bubble picker

@vahesaroyan/react-native-bubble-select React native bubble picker Installation

Vahe Saroyan 0 Jan 30, 2022
You can dismiss modal viewcontroller like Facebook Messenger by pulling scrollview or navigationbar in Swift.

PullToDismiss PullToDismiss provides dismiss modal viewcontroller function like Facebook Messenger by pulling scrollview or navigationbar with smooth

Suguru Kishimoto 479 Dec 5, 2022
You can dismiss modal viewcontroller like Facebook Messenger by pulling scrollview or navigationbar in Swift.

PullToDismiss PullToDismiss provides dismiss modal viewcontroller function like Facebook Messenger by pulling scrollview or navigationbar with smooth

Suguru Kishimoto 479 Dec 5, 2022
You can dismiss modal by using gesture

RPModalGestureTransition You can dismiss modal by using gesture. Usage 1.Define animation You define animator class inherits UIViewControllerAnimatedT

Naoya Sugimoto 90 Apr 21, 2020
Custom-Transition - A repo about custom transition between two view controllers

Custom-Transition in SWIFT This is a repo about custom transition between two vi

Prakash Chandra Awal 0 Jan 6, 2022
A UIKit custom modal transition that simulates an elastic drag

A UIKit custom transition that simulates an elastic drag.This is the Objective-C Version of Elastic Transition written in Swift by lkzhao

Matteo Tagliafico 397 Oct 28, 2022