I have 2 view controller with navigation controller. I'm pushing one firstViewController to secondViewController. i'm currently using
[self.navigationController pushViewController:detailsViewController animated:YES];
but the transition is secondView come in from the right. What i'm trying to do is secondView come in from the back and firstView fading out while secondView fading in.
Is there anyway to achieve this?
Push/Pop UIVIewController FadeIn/FadeOut in Swift
class FadeInPushSegue: UIStoryboardSegue {
var animated: Bool = true
override func perform() {
if var sourceViewController = self.sourceViewController as? UIViewController, var destinationViewController = self.destinationViewController as? UIViewController {
var transition: CATransition = CATransition()
transition.type = kCATransitionFade; //kCATransitionMoveIn; //, kCATransitionPush, kCATransitionReveal, kCATransitionFade
sourceViewController.view.window?.layer.addAnimation(transition, forKey: "kCATransition")
sourceViewController.navigationController?.pushViewController(destinationViewController, animated: false)
}
}
}
class FadeOutPopSegue: UIStoryboardSegue {
override func perform() {
if var sourceViewController = self.sourceViewController as? UIViewController, var destinationViewController = self.destinationViewController as? UIViewController {
var transition: CATransition = CATransition()
transition.duration = 0.4
transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
transition.type = kCATransitionFade; //kCATransitionMoveIn; //, kCATransitionPush, kCATransitionReveal, kCATransitionFade
sourceViewController.view.window?.layer.addAnimation(transition, forKey: "kCATransition")
sourceViewController.navigationController?.popViewControllerAnimated(false)
}
}
}
Related
I want to push a popover on top of my view controller. Currently, this code resides in my subclass of UIView:
func presentGameOver() {
let transition: CATransition = CATransition()
transition.duration = 0.75
transition.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
transition.type = CATransitionType.fade
let currentController = (getCurrentViewController() as! UINavigationController).topViewController!
currentController.navigationController!.view.layer.add(transition, forKey: nil)
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let vc = storyboard.instantiateViewController(withIdentifier: "GameOverViewController") as! GameOverViewController
vc.modalPresentationStyle = UIModalPresentationStyle.popover
vc.highScore = highScore
vc.score = score
vc.FONT_H = FONT_H
vc.delegate = self
currentController.navigationController?.pushViewController(vc, animated: false)
}
This is my class declaration:
class GridView: UIView, ModalHandler, UIPopoverPresentationControllerDelegate {
I have these two methods as well:
func popoverPresentationControllerShouldDismissPopover(_ popoverPresentationController: UIPopoverPresentationController) -> Bool {
return false
}
func adaptivePresentationStyle(for controller: UIPresentationController) -> UIModalPresentationStyle {
return UIModalPresentationStyle.none
}
In the storyboard, for the view controller I want to be a popover, I set the content size(this and this).
However, when the popover is shown, it is shown full screen. When I previously used popovers, I would present them. Does popover display not work using pushViewController()?
The animation is quite complicated if you have little experience. The following code may give you some clues.
func presentGameOver() {
let transition: CATransition = CATransition()
transition.duration = 0.75
transition.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
transition.type = CATransitionType.fade
let currentController = (getCurrentViewController() as! UINavigationController).topViewController!
currentController.navigationController!.view.layer.add(transition, forKey: nil)
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let vc = storyboard.instantiateViewController(withIdentifier: "GameOverViewController") as! GameOverViewController
vc.modalPresentationStyle = UIModalPresentationStyle.popover
vc.highScore = highScore
vc.score = score
vc.FONT_H = FONT_H
vc.delegate = self
if let popoverPresentationController = vc.popoverPresentationController{
popoverPresentationController.delegate = self;
popoverPresentationController.sourceView = self
popoverPresentationController.sourceRect = CGRect.init(x: 200, y: 200, width: 500, height: 300)}
currentController.present(vc, animated: false) {}
}
Currently, I have a view controller presenting other view controller. What I'm trying to do is to recreate the default animation used when pushing a view controller.
My current approach is:
FirstViewController:
#IBAction private func push(sender: AnyObject) {
let vc = UIStoryboard(name: "Main", bundle: nil).instantiateViewControllerWithIdentifier("SecondViewController")
let transition = CATransition()
transition.duration = 0.5
transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
transition.type = kCATransitionPush
transition.subtype = kCATransitionFromRight
view.window?.layer.addAnimation(transition, forKey: kCATransition)
presentViewController(vc, animated: false, completion: nil)
}
SecondViewController:
#IBAction private func pop(sender: AnyObject) {
let transition = CATransition()
transition.duration = 0.5
transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
transition.type = kCATransitionPush
transition.subtype = kCATransitionFromLeft
view.window?.layer.addAnimation(transition, forKey: kCATransition)
dismissViewControllerAnimated(false, completion: nil)
}
It is almost working, but I have a weird behaviour, I'm having a kind of black screen/flash when transitioning between view controllers. I already tried changing window.backgroundColor but it is not fixing the issue.
Thanks in advance 0_0...
The trouble is merely that what you're doing is not how to customize the animation for a present/dismiss transition. Apple has provided you with a clear, well-establish, official way to do that, and what you're doing is not it. You need to give your presented view controller a transitioningDelegate along with implementations of animationControllerForPresentedController: and animationControllerForDismissedController:, and implement the UIViewControllerAnimatedTransitioning protocol, possibly along with a custom UIPresentationController subclass.
I am creating a board game where each board piece is an instance of a view controller. I have subclassed UIStoryboardSegue so that each piece smoothly flows from one to the other. However, my game piece stays centered in this frame during the transition. I would like to have it so that my gamePiece (a UIImageView) stays in the center of the screen throughout the entire transition, but haven't had any luck searching.
Here is my Segue subclass, if it helps at all:
import UIKit
import QuartzCore
class RightToLeftSegue: UIStoryboardSegue {
override func perform() {
let src: UIViewController = self.sourceViewController
let dst: UIViewController = self.destinationViewController
let transition: CATransition = CATransition()
let timeFunc : CAMediaTimingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
transition.duration = 1.25
transition.timingFunction = timeFunc
transition.type = kCATransitionPush
transition.subtype = kCATransitionFromLeft
src.navigationController!.view.layer.addAnimation(transition, forKey: kCATransition)
src.navigationController!.pushViewController(dst, animated: true)
}
}
You can add this UIImageView to the window as subview before the transition happens.This way you will have it throughout the transition.
Let me know if this works out for you.
I would like to know if there is any way to make an UIModalTransitionStyle have a "push" style ?
Because I have something like this :
let storyBoard : UIStoryboard = UIStoryboard(name: "Main", bundle:nil)
let secondViewController = storyBoard.instantiateViewControllerWithIdentifier("SecondViewController") as! SecondViewController
secondViewController.modalTransitionStyle = UIModalTransitionStyle.FlipHorizontal
self.presentViewController(secondViewController, animated:true, completion:nil)
But I would like to have the simple "push" effect when I move to another viewcontroller.
Regards !
EDIT (Thanks to LoGoCSE) But still not solved
Now I have
let storyBoard : UIStoryboard = UIStoryboard(name: "Main", bundle:nil)
let secondViewController = storyBoard.instantiateViewControllerWithIdentifier("SecondViewController") as! SecondViewController
secondViewController.modalTransitionStyle = UIModalTransitionStyle.FlipHorizontal
let transition: CATransition = CATransition()
transition.duration = 0.25
transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
transition.type = kCATransitionPush
transition.subtype = kCATransitionFromRight
self.view.layer.addAnimation(transition, forKey: kCATransition)
self.presentViewController(secondViewController, animated:false, completion:nil)
But, the point is, adding the view ([self.view addSubview:destinationController.view];) doesn't work.
So I tried, to presentModalView as usual (Without animation), but The transition is done on the same view, and then, the second view appear.
-This code in Objective-C works .You need to just convert it to Swift
UIViewController *sourceViewController = self ;
UIViewController *destinationController = objdestinationViewController;
CATransition* transition = [CATransition animation];
transition.duration = .25;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionPush; //kCATransitionMoveIn; //,kCATransitionPush, kCATransitionReveal, kCATransitionFade
transition.subtype = kCATransitionFromRight; //kCATransitionFromLeft,kCATransitionFromRight, kCATransitionFromTop, kCATransitionFromBottom
[self.view.layer addAnimation:transition forKey:kCATransition];
[self.view addSubview:destinationController.view];
Hope it works :)
If I simply call the push method with:
[self.navigationController pushViewController:viewController animated:YES];
then it uses a push animation. How do I change it to use a cross dissolve animation, like I can with a modal segue?
I use an extension for easy reuse:
extension UINavigationController {
func fadeTo(_ viewController: UIViewController) {
let transition: CATransition = CATransition()
transition.duration = 0.3
transition.type = CATransitionType.fade
view.layer.add(transition, forKey: nil)
pushViewController(viewController, animated: false)
}
}
Notice how animated is false; when you set it to true, you still see the standard 'push' animation (right to left).
You can use a CATransition as demonstrated in this answer:
CATransition* transition = [CATransition animation];
transition.duration = 0.5;
transition.type = kCATransitionFade;
[self.navigationController.view.layer addAnimation:transition forKey:nil];
[self.navigationController pushViewController:viewController animated:NO];
The UINavigationControllerDelegate protocol has a method that can return a custom UIViewControllerAnimatedTransitioning object which will control the animation between the two view controllers involved in the transition.
Create an Animator class to control the cross-dissolve transition:
class Animator: NSObject, UIViewControllerAnimatedTransitioning {
let animationDuration = 0.25
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return animationDuration
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)
toVC?.view.alpha = 0.0
let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)
transitionContext.containerView.addSubview(fromVC!.view)
transitionContext.containerView.addSubview(toVC!.view)
UIView.animate(withDuration: animationDuration, animations: {
toVC?.view.alpha = 1.0
}) { (completed) in
fromVC?.view.removeFromSuperview()
transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
}
}
}
And provide it in your UINavigationControllerDelegate:
func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return Animator()
}
Here is a more in-depth tutorial: https://web.archive.org/web/20191204115047/http://blog.rinatkhanov.me/ios/transitions.html
SWIFT 3, 4.2 -- as of October, 2019
let transition = CATransition()
transition.duration = 0.5
transition.type = kCATransitionFade
self.navigationController?.view.layer.add(transition, forKey:nil)
You can set Push viewcontroller like this.
CATransition* transition = [CATransition animation];
transition.duration = 0.4;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
transition.type = kCATransitionFade;
[self.navigationController.view.layer addAnimation:transition forKey:#"kCATransition"];
[self.navigationController pushViewController:readerViewController animated:false];
You can set Pop viewcontroller like this.
CATransition* transition = [CATransition animation];
transition.duration = 0.4;
transition.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseOut];
transition.type = kCATransitionFade;
[self.navigationController.view.layer addAnimation:transition
forKey:#"kCATransition"];
[self.navigationController popViewControllerAnimated:false];
Update Swift 5
Using prepare(for segue:) instead of pushViewController:
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// other preparations
let transition: CATransition = CATransition()
transition.duration = 0.3
transition.type = CATransitionType.fade
navigationController?.view.layer.add(transition, forKey: nil)
}
Following michaels answer you can use UINavigationController extension.. something like this
/// Create an animatied fade push with default duration time.
/// - Parameters:
/// - controller: Which controller are we pushing...?
/// - animationDuration: What's the animation duration - has a default
func pushViewControllerWithFade(_ controller: UIViewController, animationDuration: TimeInterval = .Animation.defaultAnimationTime) {
let transition: CATransition = .init()
transition.duration = animationDuration
transition.type = .fade
pushViewController(controller, withTransition: transition)
}
/// Custom transition animation for pushing view contorller
/// - Parameters:
/// - controller: Which controller are we presenting now?
/// - transition: The transition for the push animation
func pushViewController(_ controller: UIViewController, withTransition transition: CATransition) {
view.layer.add(transition, forKey: nil)
pushViewController(controller, animated: false)
}