I've a custom animation that works correctly except that, at the end of dismiss animation, there is a black screen.
The code of the transition is:
class FolderAnimationController: NSObject, UIViewControllerAnimatedTransitioning {
let duration = 5.0
var presenting = true
var originFrame = CGRect.zero
var selectedFolderCell: FolderCollectionViewCell?
func transitionDuration(_ transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return duration
}
func animateTransition(_ transitionContext: UIViewControllerContextTransitioning) {
let containerView = transitionContext.containerView()
let toViewC = transitionContext.viewController(forKey: UITransitionContextToViewControllerKey)!
let fromViewC = transitionContext.viewController(forKey: UITransitionContextFromViewControllerKey)!
let folderViewC = presenting ? fromViewC as! ViewController : transitionContext.viewController(forKey: UITransitionContextToViewControllerKey) as! ViewController
let projectViewC = presenting ? toViewC as! ProjectViewController : transitionContext.viewController(forKey: UITransitionContextFromViewControllerKey) as! ProjectViewController
let cellView = presenting ? (folderViewC.folderCollectionView.cellForItem(at: (folderViewC.folderCollectionView.indexPathsForSelectedItems()?.first!)!) as! FolderCollectionViewCell).folderView : projectViewC.containerView
let cellSnapshot: UIView = presenting ? cellView!.snapshotView(afterScreenUpdates: false)! : cellView!.snapshotView(afterScreenUpdates: false)!
let cellFrame = containerView.convert(cellView!.frame, from: cellView!.superview)
cellSnapshot.frame = cellFrame
cellView!.isHidden = true
toViewC.view.frame = transitionContext.finalFrame(for: toViewC)
toViewC.view.layoutIfNeeded()
toViewC.view.alpha = 0
presenting ? (projectViewC.containerView.isHidden = true) : (self.selectedFolderCell!.folderView.isHidden = true)
containerView.addSubview(toViewC.view)
containerView.addSubview(cellSnapshot)
UIView.animate(withDuration: duration, animations: {
toViewC.view.alpha = 1.0
let finalFrame = self.presenting ? projectViewC.containerView.frame : self.originFrame
cellSnapshot.frame = finalFrame
}) { (_) in
self.presenting ? (projectViewC.containerView.isHidden = false) : (self.selectedFolderCell?.isHidden = false)
cellSnapshot.removeFromSuperview()
transitionContext.completeTransition(true)
}
}
}
And the code of the first view controller that call the animation:
func animationController(forPresentedController presented: UIViewController, presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
presentAnimator.presenting = true
presentAnimator.originFrame = openingFrame!
presentAnimator.selectedFolderCell = selectedCell!
return presentAnimator
}
func animationController(forDismissedController dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
presentAnimator.presenting = false
return presentAnimator
}
Use UIViewPropertyAnimator.runningPropertyAnimator instead UIView.animate
There was a bug in the first beta of Xcode 8. It was resolved on the second beta.
Related
I am trying to achieve some thing like following side menu open from tabbar item click.
I used the following class for Transition Animation ...
class SlideInTransition: NSObject, UIViewControllerAnimatedTransitioning {
var isPresenting = false
let dimmingView = UIView()
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 3
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard let toViewController = transitionContext.viewController(forKey: .to),
let fromViewController = transitionContext.viewController(forKey: .from) else { return }
let containerView = transitionContext.containerView
let finalWidth = toViewController.view.bounds.width * 0.3
let finalHeight = toViewController.view.bounds.height
if isPresenting {
// Add dimming view
dimmingView.backgroundColor = .black
dimmingView.alpha = 0.0
containerView.addSubview(dimmingView)
dimmingView.frame = containerView.bounds
// Add menu view controller to container
containerView.addSubview(toViewController.view)
// Init frame off the screen
toViewController.view.frame = CGRect(x: -finalWidth, y: 0, width: finalWidth, height: finalHeight)
}
// Move on screen
let transform = {
self.dimmingView.alpha = 0.5
toViewController.view.transform = CGAffineTransform(translationX: finalWidth, y: 0)
}
// Move back off screen
let identity = {
self.dimmingView.alpha = 0.0
fromViewController.view.transform = .identity
}
// Animation of the transition
let duration = transitionDuration(using: transitionContext)
let isCancelled = transitionContext.transitionWasCancelled
UIView.animate(withDuration: duration, animations: {
self.isPresenting ? transform() : identity()
}) { (_) in
transitionContext.completeTransition(!isCancelled)
}
}
}
and use it in my code as follow
guard let menuViewController = storyboard?.instantiateViewController(withIdentifier: "MenuVC") as? MenuVC else { return }
menuViewController.modalPresentationStyle = .overCurrentContext
menuViewController.transitioningDelegate = self as? UIViewControllerTransitioningDelegate
menuViewController.tabBarItem.image = UIImage(named: "ico_menu")
menuViewController.tabBarItem.selectedImage = UIImage(named: "ico_menu")
viewControllers = [orderVC,serverdVC,canceledVC,menuViewController]
extension TabbarVC: UIViewControllerTransitioningDelegate {
func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
transiton.isPresenting = true
return transiton
}
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
transiton.isPresenting = false
return transiton
}
}
but animation doe't work at all ... I want to open it like side menu over current context ..
How can i achieve some thing like that ...
TabBar is not made to handle animate transition for just a single child View controller. If you apply a custom transition, it will be applied in all of its tabs (child view controllers). Plus last time i checked, airbnb's app doesn't behave like that when opening the user profile. :)
What you can do, though, is have a separate menu button at the top of your navigation view controller or wherever and call the slide in from there:
func slideInView() {
let vcToShow = MenuViewController()
vcToShow.modalPresentationStyle = .overCurrentContext
vcToShow.transitioningDelegate = self as? UIViewControllerTransitioningDelegate
present(vcToShow, animated: true, completion: nil)
}
Or if you insist on having the menu a part of the tabs, then you can do this.
Hope this helps. :)
I am facing an incomprehensible problem I have a CollectionViewController and I want to make a custom animation.
My collection is a gallery and I want to switch from collection gallery. to fullscreen gallery.
So I have ControllerTransitionDelegate
extension NavigationGalleryViewController: UIViewControllerTransitioningDelegate {
func presentationController(forPresented presented: UIViewController, presenting: UIViewController?, source: UIViewController) -> UIPresentationController? {
return DimmingPresentationController(presentedViewController: presented, presenting: presenting)
}
func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
guard let selectedCellFrame = self.collectionView?.cellForItem(at: IndexPath(item: index, section: 0))?.frame else { return nil }
return PresentingAnimator(pageIndex: index, originFrame: selectedCellFrame)
}
My DimmingPresentationController
class DimmingPresentationController: UIPresentationController {
lazy var background = UIView(frame: .zero)
override var shouldRemovePresentersView: Bool {
return false
}
override func presentationTransitionWillBegin() {
setupBackground()
// Grabing the coordinator responsible for the presentation so that the background can be animated at the same rate
if let coordinator = presentedViewController.transitionCoordinator {
coordinator.animate(alongsideTransition: { (_) in
self.background.alpha = 1
}, completion: nil)
}
}
private func setupBackground() {
background.backgroundColor = UIColor.black
background.autoresizingMask = [.flexibleWidth, .flexibleHeight]
background.frame = containerView!.bounds
containerView!.insertSubview(background, at: 0)
background.alpha = 0
}
}
And my presenting animator
class PresentingAnimator: NSObject, UIViewControllerAnimatedTransitioning {
private let indexPath: IndexPath
private let originFrame: CGRect
private let duration: TimeInterval = 0.5
init(pageIndex: Int, originFrame: CGRect) {
self.indexPath = IndexPath(item: pageIndex, section: 0)
self.originFrame = originFrame
super.init()
}
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return duration
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard let toView = transitionContext.view(forKey: .to),
let fromVC = transitionContext.viewController(forKey: .from) as? NavigationGalleryViewController, // The problem is here !
let fromView = fromVC.collectionView?.cellForItem(at: indexPath) as? InstallationViewCell
else {
transitionContext.completeTransition(true)
return
}
// All the animation things
}
My BIG problem is that my execution go inside the else because he can't find the FromVC from the transitionContext.viewController.
And here is how I call my Gallery
gallery = SwiftPhotoGallery(delegate: self, dataSource: self)
// Gallery visual colours stuff
gallery.modalPresentationStyle = .custom
gallery.transitioningDelegate = self
present(gallery, animated: true, completion: { () -> Void in
self.gallery.currentPage = self.index
})
}
This is what I receive from the transitionContext :
Why the transitionContext won't give me the right VC ?
Well, I checked and noticed that transitionContext.viewController(forKey: .from) is NavigationController.
In line: let fromVC = transitionContext.viewController(forKey: .from) as? NavigationGalleryViewController should be nil, because it is not NavigationGalleryViewController but NavigationController.
If you want you can make smth like this: let fromVC = transitionContext.viewController(forKey: .from).childViewControllers.first as? NavigationGalleryViewController
This is my first iOS development and so I am using this tiny project to learn how the system works and how the language (swift) works too.
I am trying to make a drawer menu similar to android app and a certain number of iOS app.
I found this tutorial that explains well how to do it and how it works : here
Now since I am using a NavigationController with show I have to modify the way it is done.
I swapped the UIViewControllerTransitioningDelegate to a UINavigationControllerDelegate so I can override the navigationController function.
This means I can get the drawer out and dismiss it. It works well with a button or with the gesture.
My problem is the following : If I don't finish to drag the drawer far enough for it to reach the threshold and finishing the animation, it will be cancel and hidden. This is all well and good but when that happens there is no call to a dismiss function meaning that the snapshot I put in place in the PresentMenuAnimator is still in front of all the layers and I am stuck there even though I can interact with what's behind it.
How can I catch a dismiss or a cancel with the NavigationController ? Is that possible ?
Interactor :
import UIKit
class Interactor:UIPercentDrivenInteractiveTransition {
var hasStarted: Bool = false;
var shouldFinish: Bool = false;
}
MenuHelper :
import Foundation
import UIKit
enum Direction {
case Up
case Down
case Left
case Right
}
struct MenuHelper {
static let menuWith:CGFloat = 0.8;
static let percentThreshold:CGFloat = 0.6;
static let snapshotNumber = 12345;
static func calculateProgress(translationInView:CGPoint, viewBounds:CGRect, direction: Direction) -> CGFloat {
let pointOnAxis:CGFloat;
let axisLength:CGFloat;
switch direction {
case .Up, .Down :
pointOnAxis = translationInView.y;
axisLength = viewBounds.height;
case .Left, .Right :
pointOnAxis = translationInView.x;
axisLength = viewBounds.width;
}
let movementOnAxis = pointOnAxis/axisLength;
let positiveMovementOnAxis:Float;
let positiveMovementOnAxisPercent:Float;
switch direction {
case .Right, .Down:
positiveMovementOnAxis = fmaxf(Float(movementOnAxis), 0.0);
positiveMovementOnAxisPercent = fminf(positiveMovementOnAxis, 1.0);
return CGFloat(positiveMovementOnAxisPercent);
case .Left, .Up :
positiveMovementOnAxis = fminf(Float(movementOnAxis), 0.0);
positiveMovementOnAxisPercent = fmaxf(positiveMovementOnAxis, -1.0);
return CGFloat(-positiveMovementOnAxisPercent);
}
}
static func mapGestureStateToInteractor(gestureState:UIGestureRecognizerState, progress:CGFloat, interactor: Interactor?, triggerSegue: () -> Void ) {
guard let interactor = interactor else {return };
switch gestureState {
case .began :
interactor.hasStarted = true;
interactor.shouldFinish = false;
triggerSegue();
case .changed :
interactor.shouldFinish = progress > percentThreshold;
interactor.update(progress);
case .cancelled :
interactor.hasStarted = false;
interactor.shouldFinish = false;
interactor.cancel();
case .ended :
interactor.hasStarted = false;
interactor.shouldFinish
? interactor.finish()
: interactor.cancel();
interactor.shouldFinish = false;
default :
break;
}
}
}
MenuNavigationController :
import Foundation
import UIKit
class MenuNavigationController: UINavigationController, UINavigationControllerDelegate {
let interactor = Interactor()
override func viewDidLoad() {
super.viewDidLoad();
self.delegate = self;
}
func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
if((toVC as? MenuViewController) != nil) {
return PresentMenuAnimator();
}
else {
return DismissMenuAnimator();
}
}
func navigationController(_ navigationController: UINavigationController, interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
return interactor.hasStarted ? interactor : nil;
}
}
PresentMenuAnimator :
import UIKit
class PresentMenuAnimator: NSObject, UIViewControllerAnimatedTransitioning {
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.6;
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard
let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from),
let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)
else {return};
let containerView = transitionContext.containerView;
containerView.insertSubview(toVC.view, aboveSubview: fromVC.view);
let snapshot = fromVC.view.snapshotView(afterScreenUpdates: false);
snapshot?.tag = MenuHelper.snapshotNumber;
snapshot?.isUserInteractionEnabled = false;
snapshot?.layer.shadowOpacity = 0.7;
containerView.insertSubview(snapshot!, aboveSubview: toVC.view);
fromVC.view.isHidden = true;
UIView.animate(withDuration: transitionDuration(using: transitionContext),
animations: {snapshot?.center.x+=UIScreen.main.bounds.width*MenuHelper.menuWith;},
completion: {_ in
fromVC.view.isHidden = false;
transitionContext.completeTransition(!transitionContext.transitionWasCancelled);}
);
}
}
DismissMenuAnimator :
import UIKit
class DismissMenuAnimator : NSObject {
}
extension DismissMenuAnimator : UIViewControllerAnimatedTransitioning {
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.6;
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard
let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from),
let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)
else {
return
}
let containerView = transitionContext.containerView;
let snapshot = containerView.viewWithTag(MenuHelper.snapshotNumber)
UIView.animate(withDuration: transitionDuration(using: transitionContext),
animations: {
snapshot?.frame = CGRect(origin: CGPoint.zero, size: UIScreen.main.bounds.size)
},
completion: { _ in
let didTransitionComplete = !transitionContext.transitionWasCancelled
if didTransitionComplete {
containerView.insertSubview(toVC.view, aboveSubview: fromVC.view)
snapshot?.removeFromSuperview()
}
transitionContext.completeTransition(didTransitionComplete)
}
)
}
}
It is possible to know whether the animation was cancelled, and it can be caught in the func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) method from UINavigationControllerDelegate.
Here's a snippet of code on how to do so:
func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
navigationController.transitionCoordinator?.notifyWhenInteractionEnds { context in
if context.isCancelled {
// The interactive back transition was cancelled
}
}
}
This method could be put in your MenuNavigationController, in which you could persist your PresentMenuAnimator and tell it that the transition was cancelled, and in there remove the snapshot that's hanging around.
To fix the problem I added a verification in PresentMenuAnimator to check if it the animation was canceled.
If it was then remove the snapshot in the UIView.Animate.
I'm trying to create a transition effect on a UITabBarController somewhat similar to the Facebook app. I managed to get a "scrolling effect" working on tab switch, but I can't seem to figure out how to cross dissolve (or it doesn't work at least).
Here's my current code:
import UIKit
class ScrollingTabBarControllerDelegate: NSObject, UITabBarControllerDelegate {
func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return ScrollingTransitionAnimator(tabBarController: tabBarController, lastIndex: tabBarController.selectedIndex)
}
}
class ScrollingTransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {
weak var transitionContext: UIViewControllerContextTransitioning?
var tabBarController: UITabBarController!
var lastIndex = 0
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.2
}
init(tabBarController: UITabBarController, lastIndex: Int) {
self.tabBarController = tabBarController
self.lastIndex = lastIndex
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
self.transitionContext = transitionContext
let containerView = transitionContext.containerView
let fromViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)
let toViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)
containerView.addSubview(toViewController!.view)
var viewWidth = toViewController!.view.bounds.width
if tabBarController.selectedIndex < lastIndex {
viewWidth = -viewWidth
}
toViewController!.view.transform = CGAffineTransform(translationX: viewWidth, y: 0)
UIView.animate(withDuration: self.transitionDuration(using: (self.transitionContext)), delay: 0.0, usingSpringWithDamping: 1.2, initialSpringVelocity: 2.5, options: .transitionCrossDissolve, animations: {
toViewController!.view.transform = CGAffineTransform.identity
fromViewController!.view.transform = CGAffineTransform(translationX: -viewWidth, y: 0)
}, completion: { _ in
self.transitionContext?.completeTransition(!self.transitionContext!.transitionWasCancelled)
fromViewController!.view.transform = CGAffineTransform.identity
})
}
}
Would be great if anyone know how to get this to work, been trying for days now without progress... :/
edit: I got a cross dissolve working by replacing the UIView.animate block with:
UIView.transition(with: containerView, duration: 0.2, options: .transitionCrossDissolve, animations: {
toViewController!.view.transform = CGAffineTransform.identity
fromViewController!.view.transform = CGAffineTransform(translationX: -viewWidth, y: 0)
}, completion: { _ in
self.transitionContext?.completeTransition(!self.transitionContext!.transitionWasCancelled)
fromViewController!.view.transform = CGAffineTransform.identity
})
However, the animation is really laggy and not usable :(
edit 2: For people trying to use these snippets, don't forget to hook up the delegate for the UITabBarController, otherwise nothing will happen.
edit 3: I've found a Swift library that does exactly what I was looking for:
https://github.com/Interactive-Studio/TransitionableTab
There is a simpler way to doing this. Add the following code in the tabbar delegate:
Working on Swift 2, 3 and 4
class MySubclassedTabBarController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
delegate = self
}
}
extension MySubclassedTabBarController: UITabBarControllerDelegate {
func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool {
guard let fromView = selectedViewController?.view, let toView = viewController.view else {
return false // Make sure you want this as false
}
if fromView != toView {
UIView.transition(from: fromView, to: toView, duration: 0.3, options: [.transitionCrossDissolve], completion: nil)
}
return true
}
}
EDIT (4/23/18)
Since this answer is getting popular, I updated the code to remove the force unwraps, which is a bad practice, and added the guard statement.
EDIT (7/11/18)
#AlbertoGarcía is right. If you tap the tabbar icon twice you get a blank screen. So I added an extra check
If you want to use UIViewControllerAnimatedTransitioning to do something more custom than UIView.transition, take a look at this gist.
// MyTabController.swift
import UIKit
class MyTabBarController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
delegate = self
}
}
extension MyTabBarController: UITabBarControllerDelegate {
func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return MyTransition(viewControllers: tabBarController.viewControllers)
}
}
class MyTransition: NSObject, UIViewControllerAnimatedTransitioning {
let viewControllers: [UIViewController]?
let transitionDuration: Double = 1
init(viewControllers: [UIViewController]?) {
self.viewControllers = viewControllers
}
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return TimeInterval(transitionDuration)
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard
let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from),
let fromView = fromVC.view,
let fromIndex = getIndex(forViewController: fromVC),
let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to),
let toView = toVC.view,
let toIndex = getIndex(forViewController: toVC)
else {
transitionContext.completeTransition(false)
return
}
let frame = transitionContext.initialFrame(for: fromVC)
var fromFrameEnd = frame
var toFrameStart = frame
fromFrameEnd.origin.x = toIndex > fromIndex ? frame.origin.x - frame.width : frame.origin.x + frame.width
toFrameStart.origin.x = toIndex > fromIndex ? frame.origin.x + frame.width : frame.origin.x - frame.width
toView.frame = toFrameStart
DispatchQueue.main.async {
transitionContext.containerView.addSubview(toView)
UIView.animate(withDuration: self.transitionDuration, animations: {
fromView.frame = fromFrameEnd
toView.frame = frame
}, completion: {success in
fromView.removeFromSuperview()
transitionContext.completeTransition(success)
})
}
}
func getIndex(forViewController vc: UIViewController) -> Int? {
guard let vcs = self.viewControllers else { return nil }
for (index, thisVC) in vcs.enumerated() {
if thisVC == vc { return index }
}
return nil
}
}
I was struggling with the tab bar animation both from a user tap and programmatically calling selectedIndex = X since the accepted solution didn't work for me when setting the selected tab programatically.
In the end I managed to solve it by a UITabBarControllerDelegate and a custom UIViewControllerAnimatedTransitioning as follows:
extension MainController: UITabBarControllerDelegate {
public func tabBarController(
_ tabBarController: UITabBarController,
animationControllerForTransitionFrom fromVC: UIViewController,
to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return FadePushAnimator()
}
}
Where the FadePushAnimator looks like this:
class FadePushAnimator: NSObject, UIViewControllerAnimatedTransitioning {
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.3
}
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)
})
}
}
This approach supports any sort of custom animation and works both on user tap and setting the selected tab programatically. Tested on Swift 5.
To expand on #gmogames answer: https://stackoverflow.com/a/45362914/1993937
I couldn't get this to animate when selecting the tab bar index via code, as calling:
tabBarController.setSeletedIndex(0)
Doesn't seem to go through the same call heirarchy, and it skips the method:
tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController)
entirely, resulting in no animation.
In my code I wanted to have an animation transition for a user tapping a tab bar item in addition to me setting the tab bar item in-code manually under certain circumstances.
Here is my addition to the solution above which adds a different method to set the selected index via code that will animate the transition:
import Foundation
import UIKit
#objc class CustomTabBarController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
delegate = self
}
#objc func set(selectedIndex index : Int) {
_ = self.tabBarController(self, shouldSelect: self.viewControllers![index])
}
}
#objc extension CustomTabBarController: UITabBarControllerDelegate {
#objc func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool {
guard let fromView = selectedViewController?.view, let toView = viewController.view else {
return false // Make sure you want this as false
}
if fromView != toView {
UIView.transition(from: fromView, to: toView, duration: 0.3, options: [.transitionCrossDissolve], completion: { (true) in
})
self.selectedViewController = viewController
}
return true
}
}
Now just call
tabBarController.setSelectedWithIndex(1)
for an in-code animated transition!
I still think it is unfortunate that to get this done we have to override a method that isn't a setter and manipulate data within it. It doesn't make the tab bar controller as extensible as it should be if this is the method that we need to override to get this done.
So, a few years later and more experienced, after revisiting my own question for the same behaviour, I improved a little bit upon Derek's answer.
I inherited most of his code (as it seems like the best solution).
What I changed
I added a crossDissolve animation (as I originally wanted) to the slide animation by adding a toCoverView and fromCoverView, these are snapshotviews of the other view which will be used to fade in/out at the same time.
Changed the frame width to already start at 75% instead of having to translate the full 100% width, it's only translating 25% now which makes it feel snappier.
Added SpringWithDamping and initialSpringVelocity settings.
These changes made it feel just about as close as I could get it to Facebook's implementation and I'm personally quite happy with it.
Here's the adapted answer (most of the credit goes to Derek so be sure to upvote him):
class MyTabBarController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
delegate = self
}
}
extension MyTabBarController: UITabBarControllerDelegate {
func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return MyTransition(viewControllers: tabBarController.viewControllers)
}
}
class MyTransition: NSObject, UIViewControllerAnimatedTransitioning {
let viewControllers: [UIViewController]?
let transitionDuration: Double = 0.2
init(viewControllers: [UIViewController]?) {
self.viewControllers = viewControllers
}
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return TimeInterval(transitionDuration)
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard
let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from),
let fromView = fromVC.view,
let fromIndex = getIndex(forViewController: fromVC),
let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to),
let toView = toVC.view,
let toIndex = getIndex(forViewController: toVC)
else {
transitionContext.completeTransition(false)
return
}
let frame = transitionContext.initialFrame(for: fromVC)
var fromFrameEnd = frame
var toFrameStart = frame
let quarterFrame = frame.width * 0.25
fromFrameEnd.origin.x = toIndex > fromIndex ? frame.origin.x - quarterFrame : frame.origin.x + quarterFrame
toFrameStart.origin.x = toIndex > fromIndex ? frame.origin.x + quarterFrame : frame.origin.x - quarterFrame
toView.frame = toFrameStart
let toCoverView = fromView.snapshotView(afterScreenUpdates: false)
if let toCoverView = toCoverView {
toView.addSubview(toCoverView)
}
let fromCoverView = toView.snapshotView(afterScreenUpdates: false)
if let fromCoverView = fromCoverView {
fromView.addSubview(fromCoverView)
}
DispatchQueue.main.async {
transitionContext.containerView.addSubview(toView)
UIView.animate(withDuration: self.transitionDuration, delay: 0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.8, options: [.curveEaseOut], animations: {
fromView.frame = fromFrameEnd
toView.frame = frame
toCoverView?.alpha = 0
fromCoverView?.alpha = 1
}) { (success) in
fromCoverView?.removeFromSuperview()
toCoverView?.removeFromSuperview()
fromView.removeFromSuperview()
transitionContext.completeTransition(success)
}
}
}
func getIndex(forViewController vc: UIViewController) -> Int? {
guard let vcs = self.viewControllers else { return nil }
for (index, thisVC) in vcs.enumerated() {
if thisVC == vc { return index }
}
return nil
}
}
The only thing I've yet to figure out is how to make it "interruptible" like Facebook does. I know there's a interruptibleAnimator function for this but I haven't been able to make it work yet.
I followed This tutorial and achieve that animation but now I want to add some functionality into it like when user click in the minimised viewController I want to popup that minimised viewController back I tried to Implement TapGesture on that view and this is my code:
import Foundation
import UIKit
class TransitionOperator: NSObject, UIViewControllerAnimatedTransitioning, UIViewControllerTransitioningDelegate{
var snapshot : UIView!
var isPresenting : Bool = true
func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval {
return 0.5
}
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
if isPresenting{
presentNavigation(transitionContext)
}else{
dismissNavigation(transitionContext)
}
}
func presentNavigation(transitionContext: UIViewControllerContextTransitioning) {
let container = transitionContext.containerView()
let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)
let fromView = fromViewController!.view
let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)
let toView = toViewController!.view
let size = toView.frame.size
var offSetTransform = CGAffineTransformMakeTranslation(size.width - 120, 0)
offSetTransform = CGAffineTransformScale(offSetTransform, 0.6, 0.6)
snapshot = fromView.snapshotViewAfterScreenUpdates(true)
//TapGesture for detect touch
let aSelector : Selector = "singleTap"
let tapGesture = UITapGestureRecognizer(target: self, action: aSelector)
tapGesture.numberOfTapsRequired = 1
self.snapshot.addGestureRecognizer(tapGesture)
container.addSubview(toView)
container.addSubview(snapshot)
let duration = self.transitionDuration(transitionContext)
UIView.animateWithDuration(duration, delay: 0.0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.8, options: nil, animations: {
self.snapshot.transform = offSetTransform
}, completion: { finished in
transitionContext.completeTransition(true)
})
}
func singleTap(){
NavigationViewController().dismissViewControllerAnimated(true, completion: nil)
println("Touched")
}
func dismissNavigation(transitionContext: UIViewControllerContextTransitioning) {
let container = transitionContext.containerView()
let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)
let fromView = fromViewController!.view
let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)
let toView = toViewController!.view
let duration = self.transitionDuration(transitionContext)
UIView.animateWithDuration(duration, delay: 0.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.8, options: nil, animations: {
self.snapshot.transform = CGAffineTransformIdentity
}, completion: { finished in
transitionContext.completeTransition(true)
self.snapshot.removeFromSuperview()
})
}
func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
self.isPresenting = true
return self
}
func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
self.isPresenting = false
return self
}
}
when I click on that minimised view Touched is print as you can see into image:
But view is not dismissed.I want to popup TimelineViewController back.
Thanks in advance.
Maybe what you need to do is call self.dismissNavigation() from your singleTap method. Though I'm not sure what context to pass to that method...
I know it's been a few months but i figured it out. Look at the function animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) which has the parameter presented, the UIViewController of the snapshot. That is your reference that you need instead of calling NavigationViewController(). which is just making new instances. So create a UIView variable var foo : UIView! and in animationControllerForPresentedController() set foo = presented.
Now in your function singleTap() you can set foo.dismissViewControllerAnimated().
Hope this helps.