Niraj Burde
Niraj Burde

Reputation: 736

How to change the transition animation from bottom to top in navigation controller?

I am new to iOS. I am trying to change the transition animation in navigation controller to load a new UIView controller from bottom to top, using Segue. I believe it will not be too hard to implement but may be I am not able to understand it.

I could not find any solution in other posts.

Here's the code I've been trying:-

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
if ([segue.identifier isEqualToString:@"alarmSegue"]) {
    tab2ViewController *destViewController = segue.destinationViewController;
    UIView *destView = destViewController.view;
    destViewController.selectionName = @"alarms";

    [sender setEnabled:NO];
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0];
    [UIView animateWithDuration:0.0
                          delay:0.0
                        options: UIViewAnimationOptionCurveLinear
                     animations:^{
                         [destView setTransform:CGAffineTransformMakeTranslation(0, -1000)];
                         //[destView setFrame:CGRectMake(0, 440, 400, 45)];
                         //destView.frame = CGRectMake(0, 0, 320, 460);
                     }
                     completion:^(BOOL finished){
                         [sender setEnabled:YES];
                     }];
    [UIView commitAnimations];


     }
 }

I just want to implement a SIMPLE transition from bottom to top, using Segue. I want to set some properties of destination controller as well.

Upvotes: 2

Views: 11500

Answers (3)

Puneet Sharma
Puneet Sharma

Reputation: 9484

Well you are nearly there.

You need to change two things mainly:

1 Change the initial position of the view. You want the view to appear from bottom to top, so initially your view should be at the bottom. This piece of code should be written before the animation.

[destView setTransform:CGAffineTransformMakeTranslation(0, -1000)];

2 Then you need to slide from bottom to the original position , hence inside the animation block:

 [destView setTransform:CGAffineTransformMakeTranslation(0, 0)];

One more suggestion, I guess you are using a newer version of iOS(above iOS4) instead of using animation blocks use UIView's animation method

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

For further info, refer description.

EDIT :
According to your edit on question, you are looking to change the transition animation for NavigationController in the app using storyboard. For that you could use Custom Segue. You will have to create a custom segue, a class that subclasses UIStorySegue and override its perform method like this:

-(void)perform {
    //UIViewAnimationOptions options;
    UIViewController *sourceViewController = (UIViewController*)[self sourceViewController];
    UIViewController *destinationController = (UIViewController*)[self destinationViewController];

    CATransition* transition = [CATransition animation];
    transition.duration = 0.9f;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    transition.type = kCATransitionPush; //kCATransitionMoveIn; //, kCATransitionPush, kCATransitionReveal, kCATransitionFade
    transition.subtype = kCATransitionFromTop; //kCATransitionFromLeft, kCATransitionFromRight, kCATransitionFromTop, kCATransitionFromBottom

    [destinationController.view.layer addAnimation:transition forKey:kCATransition];
    [sourceViewController presentViewController:destinationController animated:NO completion:nil];
}

You have to change the segue class to this custom segue in storyboard as well, to make it function.

Upvotes: 2

dezinezync
dezinezync

Reputation: 3012

Replace the code between [UIView beginAnimations:nil context:nil]; and [UIView commitAnimations]; (including those two lines as well) with the following:

CGAffineTransform baseTransform = destView.transform; //1
destView.transform = CGAffineTransformTranslate(baseT,0,destView.bounds.size.height); //2

[UIView animateWithDuration: 0.5 animations:^{ 
    destView.transform = baseTransform; //3
}];
  1. Make a reference of the original transform.
  2. Push our view down without an animation so we can animate it back up
  3. Set the original transform back to the view. This time, it'll animate

You can further add the delay, options and completion parameters to that UIView Animation method. Xcode will probably help you with the autocompletes on those.

Upvotes: 2

Himanshu Joshi
Himanshu Joshi

Reputation: 3399

Try using transition effects

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
    if ([segue.identifier isEqualToString:@"alarmSegue"]) {


        CATransition transition = [CATransition animation];
        transition.duration = 0.5;
        transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        transition.type = kCATransitionPush;
        transition.subtype = direction;
        [self.view.layer addAnimation:transition forKey:kCATransition];

        tab2ViewController *destViewController = segue.destinationViewController;
        UIView *destView = destViewController.view;
        destViewController.selectionName = @"alarms";

        [sender setEnabled:NO];

         }
     }

Upvotes: 1

Related Questions