This is probably one of the most underrated topics in iOS development and one of the most difficult to master as well. When you had some solid base in your dev skill set you will start looking to dig into more advanced features like animations. If you’re a regular user of the most popular apps like Instagram, Facebook, Airbnb, Spotify, etc., you probably start to look at them with the developer’s eyes. That’s questioning how things work, what type of architecture do they use, how the animations and transitions are so smooth, and so on. Show When you play with this kind of apps you’ll for sure notice that when a new view controller is presented, it rarely does with a default pushViewController animation. Instead of that, they have their custom transitions with some cool animations. It’s a key value that makes a difference when we try to engage a user with the app. For this article, I have prepared a simple application with a couple of AC/DC albums (for simplicity I only added two). When you tap in one album it takes you to a new view with that album’s songs. So, I want to show you how we can make this custom transition between view controllers. So let’s start with some basic concepts first. Every time we push a new view controller, UIKit asks the UINavigationController’s delegate if there is a custom transition to use calling this function: If the delegate it’s not implemented or if the return value is nil, then we’re going to get the default view controller’s push and pop behavior. If instead, we return a UIViewControllerAnimatedTranistion object, UIKit will use that object for the animations. If you look at the UIViewControllerAnimatedTransition protocol you’ll see that we only need to implement two functions: In the first one, we return the duration of the transition. In the second one is when the magic happens =). Here we have access to the from view controller (the initial view controller) and the to view controller (the transitioned view controller) as well. The first thing we need to do is create a class that implements the UIViewControllerAnimatedTransition protocol. We know that we need to make our transition animations inside the animateTransition function. First, we must access the context view of the transition. You can think the context view as the view that is going to appear between the from view controller’s view and the to view controller’s view while the animation is still running. This context view is just an empty view. It doesn’t have anything in it, so we need to add to it the elements that we want to animate in our transition. In our project, we’re going to animate the following views:
If you look at the demo you’ll notice that when we tap into one album, its content view expand and fulfill the screen meanwhile the cover image moves to the top of the view while it changes its shape from a circle to a square. When we add some view to the containerView, we must give it the right frame to match the exact position that it has in the view controller’s view. To do this, we can use the convert(_ rect: CGRect, from coordinateSpace: UICoordinateSpace) -> CGRect function. Last but not least, we need to copy all the properties of the views we want to animate in order to replicate the same layout that they have in the original view. Let’s wrap up all this and start coding our animateTransition function.
Now that we have our container view ready, we can start whit our animations. For the transition that we want to make, we only need to change the view’s frame inside the animation block. Also, we set the corner radius of the album image view layer to zero, so the rounded borders that we have in the first screen, smoothly disappear in the transition. In the completion block, we need to show our AlbumDetailController’s view and then remove the snapshots that we added for the animations. And finally, we tell the context that the transition is completed. Now we have everything in place to start using our custom transition. But first, we must implement the navigationController’s delegate to tell UIKit that now it has to use our TransitionManager class to animate the transition instead of the default behavior. We have a couple of options to do this. We can implement the delegate in the AlbumsViewController and return an instance of the TransitionManager. The other option is to implement the delegate inside the TransitionManager and in the AlbumsViewController set the TransitionManager as the navigationController’s delegate. And with that in place now you have your own custom transition. I showed a simple transition animation here, but you can animate whatever you want from one view controller to another. This might be overwhelming at the beginning but once you fully understand the key concepts of the transitions you’ll only need to worry about the animations that you want to perform. Just picture what you want to accomplish in the transition and then think that most of the work will be done inside the func animateTransition(using transitionContext: UIViewControllerContextTransitioning) function. In this post I covered the push operation, the pop operation is pretty similar, we'll only need to make some small adjustments to our code. Let me know if you're interested in a second part covering this. Thanks for reading! I hope this was helpful to you. If you like, you can check the full project here. How to add child view in Swift?Call addChild() on your parent view controller, passing in your child. Set the child's frame to whatever you need, if you're using frames. Add the child's view to your main view, along with any Auto Layout constraints.nullHow to use view controller containment - Hacking with Swiftwww.hackingwithswift.com › example-code › uikit › how-to-use-view-con...null How do you transition between screens in SwiftUI?To use a transition in SwiftUI, you simply need to add the transition() modifier to a view and specify the transition you want to use. For example, let's say you have a Text view that you want to animate when it appears on the screen. You can add a slide-in animation to the view like this: Text("Hello, World!")nullSwiftUI Transitions 101 - Mediummedium.com › swiftui-transitions-101-15d26cc56b28null How to add view in viewcontroller in Swift?Add views to your view controller To that root view, you add the custom views you need to present your interface. In storyboards, you add views by dragging them onto the view controller scene. For example, the following figure shows a view controller with an image view and button on an iPhone.nullDisplaying and managing views with a view controller - Apple Developerdeveloper.apple.com › documentation › uikit › displaying_and_managing...null How to do animation in SwiftUI?Add animations to individual views. In HikeView , turn on animation for the button's rotation by adding an animation modifier that begins on changes of the showDetail value. ... . Add another animatable change by making the button larger when the graph is visible. ... . Change the animation type from easeInOut to spring() .. |
