iOS Swift Tutorial: Create a Circular Transition Animation (Custom UIViewController Transitions)

[@Asdfgh-g1d]

I couldn't find anything that was easy to understand, so I was saved. I learned a lot. Thank you very much.

[@bennychewDev]

Thanks Brian, I learned a lot in this video. A while ago I already learned how to do a custom transition, but now I understand it better. Though I didn't quite understand what the fmax was for and also the offsetVector. I guess it is to make the circle bigger than the screen so it disappears, but I don't understand the math. Also I wonder if it is bad if you leave out the removeFromSuperView in the dismiss animation part. Weather it will have memory leaks or something. Or will you get multiple instances of the views when you don't remove it from the super view? Wonder how you can check this.

[@jacksontech1]

the mechanism on how the transition works needs more explanation, especially on conforming to the UIViewControllerAnimatedTransitioning & UIViewControllerTransitioningDelegate. Nevertheless, it's good that Brian created such video so that we can explore further ourselves. Thanks Brian!

[@franzsud]

Brian, I loved the tutorial, but I did not understand how to change the color of the secondViewController if I don't want it to have a yellow color

[@florianleeser3643]

I had a simple ViewController which I embedded in a NavigationController. In this Controller there's the sourceButton and in another ViewController there's the targetButton. Now, how do I use the shwon code in my case? Because it's not working for NavigationController to ViewController. Any help?

[@maheshgvelly]

cool animation and nice tutorial. Like the reusable circular class. Am trying to achieve the same with the default nav bar items, for instance a plus button in nav bar. But its not working. Can you please help ?

[@zoeyaguilarshinoda]

hi Brian! i have a question I try to make the animation but when I run it it doesn't look circular transition, it looks like a square transition

[@DmitriiSeliutin]

Hello, Brian, thank u for this awesome tutorial, i have a question, when i make a transition to the 2nd VC , first VC doesn't call lifecycle's methods view(Will\Did)Disappear, however 2nd VC completely overlays 1st VC, is it normal behavior for this situation ?

[@OmarTorresR]

Brian, how could I do to work with cells? instead of button? some guide? Thanks man!!!

[@edwarddanescu6181]

Hi Brian! I was wondering if I could use this animation in SpriteKit, so as a transition between two scenes.. So if there's a simple way of adapting this to SpriteKit. Please let me know because that would be so useful to me!

[@theJeraldo7]

Subscribed! We’ll be doing a lot of animations in the new version of our app. And this is a good starting point for me. Thanks for the video. 👏🏼

[@JensHagfeldt]

Really nice tutorial. I will definitely be using transitions like this in my app... And will probably use two or more buttons for different features, just like Sash Q8tee asked about here. So a follow up on that would be great.

[@csmaisuriya91]

Hello Brain, can you please make a video on "How to change a height of UITableview cell based on the text of UiLabel, where my Tableview cell contains another controls also rather than UiLabel (eg. my cell contains one UILable and one button). FYI, I want it without using autolayouts (ie. by using auto resizing and height calculation mechanism for cell)

[@fsdolphin]

It would be cool if you could demonstrate how to do this transition in SwiftUI.

[@dimiutube]

Wow! Thanks, Brian, for this great explanation about custom transition. This will be very helpful for making my project look better!!!

[@turbocivic2012]

Do you know how to make custom shape animations like in the elevate app?

[@RR-wp8yj]

Great tutorial! The transition looks very very nice BUT i recently ran into a problem with this. If the child-view is open and the user gets a phone call (so the status bar is green) AND user than ends the call the child view gets messed up when the greeen In-call statusbar dissappears. I tried to fix this myself but failed. The Problem ist that the transitions-circle "around" the view gets affected by the In-Call green dropdown status bar. The whole transition gets pushed down a little, which is okay. BUT after the user ends the call it doesen't go into its original position. It stays there a few milimeters below the top of the screen. Check it yourself the simulator shortcut for triggering the green In-call status bar is >cmd+Y

[@KarthikCSSJCE]

This is so awesome. Thanks for the tutorial. But how to you make this work for a non-modal transition, like a Show inside a UINavigationController? Is that even possible?

[@Blatherer325]

+1 i am unable to get this working with a navigation controller, i tried using the .pop method in animatedcontroller forDismissed function but no effect, i still get a regular pop when calling "self.navigationController?.popViewController(animated: true)" Edit: Solution: You must use UINavigationControllerDelegate. Specifically the function func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? { if operation == .pop { transition.transitionMode = .present //THIS CAN BE CHANGED TO OBTAIN DESIRED EFFECT, for me this was what i wanted. transition.startingPoint = button.center transition.circleColor = color return transition }

[@ayushbajaj4767]

This tutorial is very helpful, thank you it helped me a lot. How could you make the same transition with the same original View Controller but it is transitioning to a third View Controller?

[@avinashgupta322]

HI Brian, its really nice animation.... its working fine when our viewcontroller class is initial view controller but its not showing the circular transition when i m making my navigation controller as initial view controller in a project its showing like push animation......... Please give me some suggesions for resolving this issue. Thanks

[@avinashgupta322]

Got the solution.

[@knowdaqueen177]

Ashish Gupta can you help me?

[@bisqqa1103]

I have the same problem how did you do it?

[@maheshgvelly]

It is also not working if the view controller has NAGIGATION BAR embedded in it. How can do the same with navigation bar ?

[@AcidRottenBrain]

How about using this with navigation controller?

[@kevinodell2992]

Lets say i have two buttons i want the animation for that go to two different view controllers, everything is working except the error that i am receiving is signal sigabrt for the let secondVC = segue.destination. is there a way to correct this so that the second button in the third view controller works.

[@brianharper3882]

Thank you Brian. i have been looking for something like this for a while.

[@97NJK]

may i ask for the mainbutton why is it outlet instead of action when you connect to the view controller?

[@RupeeInc]

This is a great tutorial, I wish you had explained the logic of what you were doing before coding it all out

[@TheJuliolocoh]

Can u how us to use coinbase api graph and how to make a vertical,horizontal

[@MrjavoiThe]

Nice finally found a tutorial with some advanced techniques in iOS. GJ!

[@KarthiKeyan-cr4ju]

Thanks but not working if embedded with navigation bar.

[@lucasdebritoarruda7831]

it works if you use navigationController?.present

[@ariasfigueroa]

Thanks Brian this tutorial helped me with some ideas for upcoming projects.

[@michaelromanenko]

Thank you! Actually, this video is a very good introduction to implement any custom transition in general! Gave me understanding how this stuff really works!

[@kuwaitkarate]

Thank you , but how can i use it if i have more than 4 buttons in same view?? each button connect to different view ?

[@Joeron79]

How to show/hide camera transition on UiTabbarController like Whatsapp?

[@mikemorgano5505]

will this still work with swift 4?

[@denissondesouza]

You said all there is to it at least 5 times, I thought you would never finish it. lol overall you did a fantastic job well done!!!

[@BrianAdvent]

😀 thank you so much!

[@zxish9017]

+BrianAdvent how do you add more than one view controllers

[@keshavkumar1522]

func getFrameForCircle(viewSize: CGSize, viewCenter: CGPoint, startPoint: CGPoint) -> CGRect { let xLength = fmax(startPoint.x, viewSize.width - startPoint.x) let yLength = fmax(startPoint.y, viewSize.height - startPoint.y) let offestVector = sqrt(xLength * xLength + yLength * yLength) * 2 let size = CGSize(width: offestVector, height: offestVector) return CGRect(origin: CGPoint.zero, size: size) } I don't understand this logic. Can you please elaborate this clearly?

[@krutomjer]

Thank you for the video, I plan on using this as a settings VC and/or as an input VC.

[@AlexdeKoning]

There is something wrong with the calculations, somehow the viewcontroller that gets presented with this animation gets zoomed in somewhat which causes the UIViews to shift to the middle. This even causes the UIViews on the iPhone 5S to push to the right or pushed out of the screen, which makes this animation kind of useless.

[@Blatherer325]

+1 i am unable to get this working with a navigation controller, i tried using the .pop method in animatedcontroller forDismissed function but no effect, i still get a regular pop when calling "self.navigationController?.popViewController(animated: true)" Edit: Solution: You must use UINavigationControllerDelegate. Specifically the function func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? { if operation == .pop { transition.transitionMode = .present //THIS CAN BE CHANGED TO OBTAIN DESIRED EFFECT, for me this was what i wanted. transition.startingPoint = button.center transition.circleColor = color return transition }

[@shingetzu88]

Joe how were you able to do this? I added UINavigationControllerDelegate to the first VC and added this function. I tried using the if statement but doing "push" instead of "pop" since I am going to the 2nd VC but its not working.

[@cruy]

totally awesome... more of these please :)

[@gunthermeier9576]

I am getting a Signal Sigabrt error as soon as i click the Open-Menu-Button Any ideas?

[@pacoramirez8298]

Nothing happens once I run the code

[@sminkly]

Hi. Really useful tutorial, thanks.

[@lukasaudir8]

am I the only one who didn`t understand the line " let xLenght = fmax(startPoint.x, viewSize.width - startPoint.x)" ? why can't this constant just be "let xLenght = startPoint.x" ? thank you for the great material you provide on your channel

[@brod515]

Did you figure out what the equation is doing, because I too have no idea what the fmax portion of the method does. Not to mention that the method has a viewCenter Parameter that is not even being used.

[@brod515]

Hey, Don't know if you will find this but I figured it out. It's really simple once you see the picture, the problem is that he did not bother explaining it so it looks like it came out of nowhere. two things also cause confusion here; the first is the fact that he called the one of the variables offsetVector when it really shouldn't be called that as it is not offsetting anything really and the second (which I think is more of a mistake ) is he tags on viewCenter as a parameter to the method and it is never used. Ignoring this let me explain what that fmax() function was for (it's really obvious now that I think about it). Understand that the circle transition needs to fill the the whole screen and the way to do that is to look at the farthest corner on the screen to make sure the circle gets big enough to reach it. so you are trying to get the largest distance from one of the corners to the the point where the circle begins growing (startPoint). for the x value for example if the yellow button is closer to the left side of the screen so the distance to the right side of the screen as compared to the left side of the screen is larger and we want that distance thus using the width of the frame minus the startPosition.x to get that distance... same thing happens with the why coordinate. the we use those x and y to get the length. and create a CGRect using that size. all this ensures that the animation will just reach the farthest corner and then finish the animation. if your button is in the middle removing the x coordinate fmax() function and just sticking with startPosition.x won't make any difference since the button is in the middle and the distance on both sides of the screen is the same. but try removing the fmax() for the why and just using startPosition.y and you'll see what I mean. TL;DR: the fmax(startPosition.x, width - startPosition.x) function is trying to see whether the distance find which distance is greater between the button and the left side of the screen or the button and right side of the screen.

[@MateiSuica]

Great tutorial, thanks!

[@adamstreak4059]

i'm big fan of you after this tutorial :) #swift3 !

[@94Demka]

Nice. I really like it

[@75pics73]

Once again Fantastic. More please MORE :)

[@emreciftci5403]

You are AWESOME!!!!!!!!!

[@kiranjasvanee288]

Great video man

[@hilalalhakani9139]

i'm having troubles understanding the offset Vector can someone help me

[@bhagyashingale5663]

Looks like a lot of more work compared to a simple scale transition

[@dontknownothing8394]

Hi , i'm doing it completely programmatically but i don't know how to set up the segue for storyboard... who can help me?

[@Kaungsoe125]

Since you are doing programatic way, you don't need to override prepareForSegue method, just write the code below let secondVC = YourSecondViewControlelr() secondVC.transitioningDelegate = self secondVC.modalPresentationStyle = .custom

[@helmerbarcos]

below of what?? im having the same problem

[@TejKiran]

It looks awesome!! :)

[@labuten6646]

thanks a lot! very helpful!

[@spongebobber1000]

Cool Tutorial!

[@brightfuturebf]

This is soooo awesome!

[@mohammadtahir7931]

how to show with navigation bar

[@jeremyconley9061]

You can embed a nav controller and change the segue to a modal one. And add a nav bar to the second VC if you want it.

[@g00dvibes47]

dude, this is nasty. subbed.

[@nomaaad8001]

amazing.. i can't following yet.

[@TheJuliolocoh]

Like coinbase dashboard

[@techaztech2335]

Here is a custom class to make your buttons round instead of writing code in every view controller, just assign this as a subclass for the buttons and hit enter and you would see the custom radius option in the attributes inspector and set it to round the way you want and it would reflect right in the story board without having to built the app ---- import UIKit @IBDesignable class CircleButton: UIButton { @IBInspectable var cornerRadius: CGFloat = 30.0 { didSet{ setupView() } } override func prepareForInterfaceBuilder() { setupView() } func setupView(){ layer.cornerRadius = cornerRadius } }

[@wondamaner]

This is silly. You should just assign view.height/2 and be done. Why are you hard coding it to 30?

[@mawesome4ever]

That doesn't work anymore, there are a whole bunch of errors :/

[@BrianAdvent]

Are you using Xcode 8? If you do, you shouldn't have any problems compiling this project. Try to compare your version with the one on GitHub (github.com/brianadvent/CircularTransition) to see if you made any mistakes.

[@mawesome4ever]

I updated my Mac, the errors went away but i still get one error and one warning... Also, i don't have any iphone simulator on xcode anymore, not sure why. They were there before the update. The warning is "iOS Deployment Target '10.0' is newer than SDK 'iOS 9.3' in target CircularTransition" and the error is "No matching provisioning profiles found: No provisioning profiles with a valid signing identity (i.e. certificate and private key pair) matching the bundle identifier “com.brianAdvent.CircularTransition” were found." I don't know how to go about to fix this, please help!

[@chaitanyaramji]

Hi Brian, If I wanted to use this animation in a collectionView's didSelect Method will tranisitioning to another ViewController purely with code, how would I achieve that?

[@guruitcompany]

nice!

[@s11gangsta]

there are 4 types errors with mine, 1) Cannot assign value of type 'CGPoint' to type 'CGRect' & 2) "Cannot convert return expression of type 'CGRect' to return type 'CGPoint'" & 3) "Expected '}' at end of brace statement" 4) "Expected '}' in class" Please Help

[@bloblyblo]

Hi, we need more stuff about UI how about implementing this floating action github.com/Ramotion/circle-menu and when the menu is pressed or shown, the background becomes blur. thanks.

[@someguytu]

Swift is definitely not a rapid prototype language. You can get this done in java so much faster. I am new to swift, and in comparison to nodejs laravel css and html5, it is just absurdly complicated and time consuming, to even get the smallest task done. Even tables seems to be a complete pain, and that is sadly the first thing you learn. Just giving my point of view.

[@adityagarg190]

If I may ask, how would this be faster in java?

[@someguytu]

try ionic.io/ for apps and unreal engine 4 for games. I honestly cant see any reason to use swift if you are looking to rapid prototype anything. Also you can do this same transition with 4 lines of code in css and javascript rather than all this craziness.

[@gilangrilhami]

hey Brian, awesome tutorial, i really love it :) But i had some issue when i was pressing the menu button. If you don't mind, please take a look at my question on stack overflow stackoverflow.com/questions/41415033/i-got-a-thread1-exc-bad-instruction-while-trying-to-run-xcode

[@imax21i]

nice but too Android style :|

[@AndrewTimosca]

Holy hell. Talk slower. This tutorial is definitely for advanced peeps.

[@wondamaner]

The call it Computer Science for a reason. Coding is not the applicable term for writing software...