iOS Transition Animations: The proper way to do it
I recognized from iOS transition animations in the Apple lets in UIKit APIs to use custom animations of their operating system. Apple lets us iOS transition animations outline training that may be implemented for each push or pop transition on a navigation stack, in addition to the modal popup transitions. You will discover the ways to update the rush, pop, and modal iOS transition animations with custom & percentage pushed interactions.
UIKit custom transition API
In this transition API, we need to use much training and delegate UI view controller transitioning delegate. Every view controller may have a transitioning delegate, in that the delegate implementation may upload your custom animation and interplay controllers. Those objects are the only ones that are answerable for the prevailing animation method, and this delegate is the vicinity in which you may insert your code to the UIKit framework.
UI navigation controller delegate
The UI navigation controller delegate is having a technique that might be answerable for custom push and pop animations. The view controller for iOS transition animations delegate and UI navigation controller is equal, however, you will see this within the applications.
UI navigation controller operation
The navigation controller operation is essentially an Enum, it presents the animations that commonly push or pop the animation for navigation animation.
UI view controller iOS transition animations
These objects are again through the transition delegate, so essentially it’s miles the vicinity in which you put into the effect of flamboyant custom view animations.
UI view controller context transition
The context of iOS transition animations carries all of the information approximately, from this you may get all the collaborating perspectives, controllers, and lots. The transitioning context is to be with a view of using it throughout the iOS transition animations.
UI percent driven interactive transition
It is an item that drives an interactive animation among one view controller and another. In nutshell, that is the aspect that offers you the potential to swipe a navigation controller interactively along with your arms from the display.
Custom iOS transition animations
Let’s soar into the actual coding, I’ll display you the way to create simple fade iOS transition animations among the view controller’s interior for a navigation stack.
open class FadePushAnimator: NSObject, UIViewControllerAnimatedTransitioning {
open func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.5
}
open override func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard
let toViewController = transitionContext.viewController(forKey: .to)
else {
return
}
transitionContext.containerView.addSubview(toViewController.view)
toViewController.view.alpha = 0
let duration = self.transitionDuration(using: transitionContext)
UIView.animate(withDuration: duration, animations: {
toViewController.view.alpha = 1
}, completion: { _ in
transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
})
}
}
You may understand that growing a custom iOS transition animations is quite simple. You want to put into the effect the delegate techniques. On 2 techniques, one will go back to the period of the animation, and the other will include the real iOS transition animations.
In that transition context, it presents a custom box view item that’s what you may use within the animation, and additionally, you may seize the collaborating perspectives and controllers from these items as referred to before.
open class FadePopAnimator: CustomAnimator {
open func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.5
}
open override func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard
let fromViewController = transitionContext.viewController(forKey: .from),
let toViewController = transitionContext.viewController(forKey: .to)
else {
return
}
transitionContext.containerView.insertSubview(toViewController.view, belowSubview: fromViewController.view)
let duration = self.transitionDuration(using: transitionContext)
UIView.animate(withDuration: duration, animations: {
fromViewController.view.alpha = 0
}, completion: { _ in
transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
})
}
}
At last, you want to update the navigation controller’s to delegate the approach of extrude the integrated UIKit device animation.
extension MainViewController: UINavigationControllerDelegate {
func navigationController(_ navigationController: UINavigationController,
animationControllerFor operation: UINavigationController.Operation,
from fromVC: UIViewController,
to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
switch operation {
case .push:
return FadePushAnimator()
case .pop:
return FadePopAnimator()
default:
return nil
}
}
}
We don’t want to claim a separate class to push and pop, simply placed the animations within the lively transition class.
Driven interactive iOS transition animations
As ways as you recognize the way to put into effect for custom iOS transition animations, now it is time to make it interactive. This method isn’t tough for miles quite simple, all you want is a recognizer and a delegate approach which makes the work properly.
class DetailViewController: UIViewController {
var interactionController: UIPercentDrivenInteractiveTransition?
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .lightGray
let edge = UIScreenEdgePanGestureRecognizer(target: self,
action: #selector(self.handleEdgePan(_:)))
edge.edges = .left
self.view.addGestureRecognizer(edge)
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
self.navigationController?.delegate = self
}
@objc func handleEdgePan(_ gesture: UIScreenEdgePanGestureRecognizer) {
let translate = gesture.translation(in: gesture.view)
let percent = translate.x / gesture.view!.bounds.size.width
switch gesture.state {
case .began:
self.interactionController = UIPercentDrivenInteractiveTransition()
self.navigationController?.popViewController(animated: true)
case .changed:
self.interactionController?.update(percent)
case .ended:
let velocity = gesture.velocity(in: gesture.view)
if percent > 0.5 || velocity.x > 0 {
self.interactionController?.finish()
}
else {
self.interactionController?.cancel()
}
self.interactionController = nil
default:
break
}
}
}
extension DetailViewController: UINavigationControllerDelegate {
/* … */
func navigationController(_ navigationController: UINavigationController,
interactionControllerFor animationController: UIViewControllerAnimatedTransitioning)
-> UIViewControllerInteractiveTransitioning? {
return self.interactionController
}
}
Inside the controller in an effort to be popped, you may take possession of the navigation controllers and put it into the effect of an interactive transition controller with the usage of a display to the facet of a gesture recognizer. The entire code is going below to a brand-new subclass of UI percent driven interactive transitions. However to make this easy time as we are able to pass that and go along with this clean approaches.
Navigation vs modal presentation
In this, there may be a small distinction between customizing the navigation stack animations and the modal presentation styles. If you going to customize a view controller transition you will constantly do something like this.
class DetailViewController: UIViewController {
/* … */
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
super.prepare(for: segue, sender: sender)
guard let controller = segue.destination as? ModalViewController else {
return
}
controller.transitioningDelegate = self
controller.modalPresentationStyle = .custom
controller.modalPresentationCapturesStatusBarAppearance = true
}
}
Next, we cross the transitioning delegate, we have already got one item of the usage has equal objects.
extension DetailViewController: UIViewControllerTransitioningDelegate {
func animationController(forPresented presented: UIViewController,
presenting: UIViewController,
source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return FadePushAnimator()
}
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return FadePopAnimator()
}
}
If you run the code that ought to work in high-quality which includes the prevailing modal view controller. Now you may attempt to update the provided controller has been a hassle, that takes place in the entire app which will flip to a black display.
(pop != dismiss) && (push != present)
To clean the hassle, you need to regulate the pop animation for buying your display and the animations again. Basically, the hassle is out of the place where the perspectives and reminiscence the management.
open class FadePopAnimator: NSObject, UIViewControllerAnimatedTransitioning {
public enum TransitionType {
case navigation
case modal
}
let type: TransitionType
let duration: TimeInterval
public init(type: TransitionType, duration: TimeInterval = 0.25) {
self.type = type
self.duration = duration
super.init()
}
open func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return self.duration
}
open override func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard
let fromViewController = transitionContext.viewController(forKey: .from)
else {
return
}
if self.type == .navigation, let toViewController = transitionContext.viewController(forKey: .to) {
transitionContext.containerView.insertSubview(toViewController.view, belowSubview: fromViewController.view)
}
let duration = self.transitionDuration(using: transitionContext)
UIView.animate(withDuration: duration, animations: {
fromViewController.view.alpha = 0
}, completion: { _ in
transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
})
}
}
The best solution is to introduce a brand-new asset so that you could make a choice to push or pop the view controller that are based totally.
Conclusion
Adding iOS transition animations are simple and add opposite to the device animation. There are plenty of different custom animation activities at the custom iOS transition animations.
Dubai
India
Leave A Comment
You must be logged in to post a comment.