andreamazz / bubbletransition

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

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

Screenshot

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.

bubbletransition's Issues

Issue on Swift 3 and Xcode 8

I updated the Source Code to Swift 3 but the problem is that the Bubble Transition not working anymore for me :( .

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:

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

Support Swift Packages Manager

CARTHAGE SUPPORT.

#8

You may have to update your pods.

about `UIStatusBarStyle`

Because newVC.modalPresentationStyle = .custom
so, Is not working

override var preferredStatusBarStyle: UIStatusBarStyle {
        if #available(iOS 13.0, *) {
            return .darkContent
        } else {
            return .default
        }
    }

If oldVC and NewVC have different status bar styles, What should I do?

When doing pod install, Swift 3 branch not being pulled.

Hi,

I noticed that the instructions for installing via Cocoapods isn't correct. When using pod 'BubbleTransition', '~> 1.0.0' in a podfile and then doing pod install in the terminal, it pulls an older version written in Swift 2.2. But if I do pod 'BubbleTransition', :git => 'https://github.com/andreamazz/BubbleTransition.git', it pulls the master branch with has the lastest changes in Swift 3.0. Was wondering if it was setup like that on purpose?

Any chance of navigation instead of presenting?

i want this in my navigation controller

minimum deployment target

• BubbleTransition (~> 1.0.0) required by Podfile

Specs satisfying the BubbleTransition (~> 1.0.0) dependency were found, but they required a higher minimum deployment target.

I came across this error when i was trying to install in through cocoa pods
My minimum deployment target is 9.0

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.

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?()
        }
    }
}

How to use the bubble transition programmatically?

In the demo, the action is directly binding to the storyboard, but when I try to self.present new viewcontroller, the bubble transition won't work, what should I do?

Thanks

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,

Good

Good

I put `transmissionMode = .dismiss` in present mode and shows black. (Swift3, xCode8)

what should I do if I want to have dismiss direction for presenting non modal controller?

update for swift 4.2?

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:

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

Initializing

How do I call the transition? I am creating buttons dynamically (in the code) so how do I attach it?

Setup with Carthage unable to build

After adding your Framework in "Linked Frameworks and Libraries" I did following:

1. My run script includes
   /usr/local/bin/carthage copy-frameworks
2. Input files
   $(SRCROOT)/Carthage/Build/iOS/BubbleTransition.framework
3. This leaves me with following error:
   

Could it be related to the BubbleTransition.framework.dSYM file?
I found following Issue @Carthage that could be useful: Carthage/Carthage#507

Swipe down to dismiss

Is there a way to swipe down to dismiss the ModalViewController? If so, how can this be done? Can that be added in a next update? Please let me know, thanks!

Github says this project's language is Shell

It shows Shell in my starred page

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
}

}

Orientations

Problem

I use your beautiful control but when you make a presentation to a view controller with autorotate the rotation misses

- (NSUInteger)supportedInterfaceOrientations {
    return UIInterfaceOrientationMaskLandscape;
}

-(BOOL)shouldAutorotate {
    return YES;
}

Can you give me a idea to get this done please?

Button clicks or tableview cell selection not working

Hi,
First of all thanks for the awesome library
I have added a button and tableview in the presented view. But the button clicks or tableview cell selection are not working.

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.

yeah, like material design

Multiple button animation

how can i use with multiple button with difference location?

Segue To Storyboard Reference

Hello,

I came across an issue where I refactored my storyboard and am using a storyboard reference. My segue is identical to what it was when I had my VCs in the same storyboard and the transition worked.

Now the bubble transition is not honored and the segue is performed as a regular modal . prepareForSegue is being called and has the following:

if segue.identifier == "FeedbackSegueIdentifier" {            
            let controller = segue.destination
            controller.transitioningDelegate = self
            controller.modalPresentationStyle = .custom
}

With the new storyboard reference I have tried two options

1. Reference to the storyboard and add an intial point of entry
2. Reference the specific UINavigationController in my storboard reference (Reference ID)

Both ignored the transition

Swift4 + ObjC

Now Swift4 has changed the way that Objective-C is called, there needs to be a very minor change to this library.

@objc needs to be added before all of the open vars.

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.

↑ my storyboard

↑ devise screen.

Can you give me some ideas?

Thanks!

swift 4?

please

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?

present two viewControllers at once

Hi,

When I touch my button with BubbleTransition initiated, there is the bubble animation and it presents the source ViewController and destination ViewController at the same time. Any idea? Thanks.

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.

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
}

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

Wrong Frame Starting Center when Translucent is False

When using navigation bar with Translucent = False the starting point of the animation is calculated wrong.

Check the following video:
https://streamable.com/gs9rn

Check my forked repo to reproduce:
https://github.com/Alexookah/BubbleTransition

changes:
i added a navigation controller as initial vc and changed the translucency in the navigation Bar.

what should be added if i have 2 button?

especially at this part transition.startingPoint = transitionButton.center

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.

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.

SpriteKit

Is there anyway to make it support SpriteKit and scenes?

can't dismiss viewcontroller in ios12

Objective-C

Are you considering uploading Objective-C code of this transition?

Looks fantastic, by the way!