How do I do a Fade/No transition between view controllers
Is it possible to do a fade in and fade out transition between View Controllers in Storyboard. Or without transition.
If it's possible, what's the code for it?
If presenting a modal view controller, you can specify a modalTransitionStyle
of UIModalTransitionStyleCrossDissolve
. If doing this with a segue in your storyboard, select the attributes inspector for the segue, and specify the transition style there:
If presenting the view controller programmatically, you can define your modal segue between the view controllers in your storyboard with a "Transition" of "Cross Dissolve" and then have the source view controller perform this segue:
[self performSegueWithIdentifier:@"presentSegue" sender:sender];
Or, if you are calling presentViewController
:
UIViewController *controller = [self.storyboard instantiateViewControllerWithIdentifier:@"YourStoryboardID"];
controller.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
[self presentViewController:controller animated:YES completion:nil];
In iOS 7, Apple has provided a new technology that provides a rich and robust control for highly customized transitions. For more information, refer to WWDC 2013 video Custom Transitions Using View Controllers.
But, for instance, if you want to customize the push and pop animations in iOS 7 to fade, you would specify a delegate
for the navigation controller
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationController.delegate = self;
}
You would then implement animationControllerForOperation
that specified the animator objects for pushing and popping:
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController*)fromVC
toViewController:(UIViewController*)toVC
{
if (operation == UINavigationControllerOperationPush)
return [[PushAnimator alloc] init];
if (operation == UINavigationControllerOperationPop)
return [[PopAnimator alloc] init];
return nil;
}
You'd obviously have to implement your custom push and pop animators, such as:
@interface PushAnimator : NSObject <UIViewControllerAnimatedTransitioning>
@end
@implementation PushAnimator
- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
{
return 0.5;
}
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
UIViewController* toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
[[transitionContext containerView] addSubview:toViewController.view];
toViewController.view.alpha = 0.0;
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
toViewController.view.alpha = 1.0;
} completion:^(BOOL finished) {
[transitionContext completeTransition:![transitionContext transitionWasCancelled]];
}];
}
@end
And
@interface PopAnimator : NSObject <UIViewControllerAnimatedTransitioning>
@end
@implementation PopAnimator
- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
{
return 0.5;
}
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
UIViewController* toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIViewController* fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
[[transitionContext containerView] insertSubview:toViewController.view belowSubview:fromViewController.view];
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
fromViewController.view.alpha = 0.0;
} completion:^(BOOL finished) {
[transitionContext completeTransition:![transitionContext transitionWasCancelled]];
}];
}
@end
There is a similar, but slightly different technique for customizing modal transitions, too (though if you were just doing a face, you'd probably just use the modalTransitionStyle
discussed above unless there was some other subtle customization you wanted to employ). See the aforementioned Custom Transitions Using View Controllers for more information.
Bottom line, custom transitions for iOS 7 are a slightly complicated, but very robust way to provide tremendous control over the animations for transitions.
For creating Custom Segue create subclass of UIStoryboard segue. For example:
// MCFadeSegue.h
#import <UIKit/UIKit.h>
@interface MCFadeSegue : UIStoryboardSegue
@end
// MCFadeSegue.m
#import <QuartzCore/QuartzCore.h>
#import "MCFadeSegue.h"
@implementation MCFadeSegue
- (void)perform
{
CATransition *transition = [CATransition animation];
transition.duration = 0.5;
transition.type = kCATransitionFade;
[[[[[self sourceViewController] view] window] layer] addAnimation:transition
forKey:kCATransitionFade];
[[self sourceViewController]
presentViewController:[self destinationViewController]
animated:NO completion:NULL];
}
@end
Then in MainStoryboard.storyboard choose segue and set Style:Custom and Class:MCFadeSegue.
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)
}
}
}
Try this one.
let transition: CATransition = CATransition()
transition.duration = 0.4
transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
transition.type = kCATransitionFade
self.navigationController!.view.layer.addAnimation(transition, forKey: nil)
let vc = self.storyboard?.instantiateViewControllerWithIdentifier("vcID") as! My_ViewController
self.navigationController?.pushViewController(vc, animated: false)
Without needing to create a custom segue, I put together this code to present the view...
UIViewController *nextView = [[UIStoryboard storyboardWithName:@"Main" bundle:nil] instantiateViewControllerWithIdentifier:@"YOUR_VIEW_CONTROLLER_STORYBOARD_NAME"]; nextView.modalTransitionStyle = UIModalTransitionStyleCrossDissolve; [self.navigationController presentViewController:nextView animated:YES completion:nil]; // (For a cross dissolve, set animated:YES. For no transition, set animated:NO.)
Hope this helps anyone who comes across this question!