Customizing push and pop transition animations

first, the effect and source

This article describes how to implement a Navigationcontroller custom push and pop transition animation, running as follows:

Source: Https://github.com/dolacmeng/TransitionDemo or http://download.csdn.net/detail/dolacmeng/9572384
Ii. Preparatory work

First, create a new instance of two Viewcontroller, Firstviewcontroller and Secondviewcontroller, including a tableview list in Firstviewcontroller, Each cell shows a picture and caption, and when the user clicks on any cell, it jumps to Secondviewcontroller, and the picture in the cell moves to the new Viewcontroller in animated form, The layout implementation details of Firstviewcontroller and Secondviewcontroller are no longer burdensome.
Iii. Using custom transition effects

In order for Uinavigationcontroller to use our custom transition animation instead of the system default animation, we first need to let Firstviewcontroller follow the Uinavigationcontrollerdelegate protocol, and set the proxy object for the current controller to Navigationcontroller in Viewdidappear:

-(void) Viewdidappear: (BOOL) animated {
    [Super viewdidappear:animated];
    Self.navigationController.delegate = self;
}

We should also cancel the proxy object as navigation control when the controller is not visible.

-(void) Viewwilldisappear: (BOOL) animated {
    [Super viewwilldisappear:animated];
   if (self.navigationController.delegate = self) {
        self.navigationController.delegate = nil;
    }
}

When a push or pop is used to controller from the navigation stack or out of the stack, it asks its agent to obtain an object that follows the Uiviewcontrolleranimatedtransitioning protocol. We named this object firsttransition, and we can just go back to Firsttransiton by implementing the Uinavigationcontrollerdelegate method below.

-(id<uiviewcontrolleranimatedtransitioning>) Navigationcontroller: (Uinavigationcontroller *) Navigationcontroller
                                  animationcontrollerforoperation: (uinavigationcontrolleroperation) Operation
                                               Fromviewcontroller: (Uiviewcontroller *) Fromvc
                                                 toviewcontroller: (Uiviewcontroller *) TOVC {
    if (FromVC = self && [TOVC Iskindofclass:[secondviewcontroller class]] {return
        [[Firsttransition alloc] init];
    }
    else {return
        nil;
    }
}

Iv. Implementing Custom transition effects

Firsttransition now the error, because we haven't defined this class, then we create a new NSObject subclass and follow the Uiviewcontrolleranimatedtransitioning protocol, Named Firsttransition.

Now that we're running the project, there's no effect, and Firsttransition has a warning that we haven't implemented the Uiviewcontrolleranimatedtransitioning protocol approach. Because we have to implement the two methods of this proxy: animatetransition: and Transitionduration:

Transitionduration: Just the time to return the transition animation:

-(Nstimeinterval) Transitionduration: (id<uiviewcontrollercontexttransitioning>) TransitionContext {
    return 0.3;
}

Animatetransition: The method is the core of this article, and it will handle the animation of the entire transition. It passes a parameter that contains a few of the classes we need to use, and provides the following methods

Viewcontrollerforkey: Two controllers for transition

Containerview holds two Viewcontroller container view

Initialframeforviewcontroller: And Finalframeforviewcontroller the starting and ending positions of each controller view.

Let's look at the implementation of Animatetransition: We first get two controller of the transition and a pointer to the container view.

-(void) Animatetransition: (id<uiviewcontrollercontexttransitioning>) Transitioncontext {
    Firstviewcontroller *fromviewcontroller = (firstviewcontroller*) [Transitioncontext ViewControllerForKey: Uitransitioncontextfromviewcontrollerkey];
    Secondviewcontroller *toviewcontroller = (secondviewcontroller*) [Transitioncontext ViewControllerForKey: Uitransitioncontexttoviewcontrollerkey];
    UIView *containerview = [Transitioncontext Containerview];
    Nstimeinterval duration = [self transitionduration:transitioncontext];

Then we get the cell to transition, get imageview snapshot, push operation when we move this snapshot and change its size, while hiding the imageview of the cell, making people look like ImageView moving.

Get a snapshot of a picture in the cell
    jxtableviewcell *cell = (jxtableviewcell*) [Fromviewcontroller.tableview Cellforrowatindexpath: [Fromviewcontroller.tableview Indexpathforselectedrow]];
    UIView *cellimagesnapshot = [Cell.leftimageview snapshotviewafterscreenupdates:no];
    Cellimagesnapshot.frame = [Containerview convertRect:cell.leftImageView.frame fromview: Cell.leftImageView.superview];
    Cell.leftImageView.hidden = YES;

Then we set the second controller view, set it to transparent and place it in the final position. We will make it appear gradually in the process of transition.

Sets the state of the initial view
    toViewController.view.frame = [Transitioncontext Finalframeforviewcontroller:toviewcontroller];
    ToViewController.view.alpha = 0;
    ToViewController.imageView.hidden = YES;
    
    [Containerview AddSubview:toViewController.view];
    [Containerview Addsubview:cellimagesnapshot];

Now we start to write the view animation, move the snapshot of the picture, gradually show the second controller view, in the end of the animation block, remove the snapshot and show us the hidden view, and finally, we need to call Completetransition: To inform the transition context that the transition is complete.

[UIView animatewithduration:duration animations:^{
        toViewController.view.alpha = 1.0;
        CGRect frame = [Containerview convertRect:toViewController.imageView.frame fromView:toViewController.view];
        Cellimagesnapshot.frame = frame;
    } completion:^ (BOOL finished) {
        ToViewController.imageView.hidden = NO;
        Cell.leftImageView.hidden = NO;
        [Cellimagesnapshot Removefromsuperview];
        
        [Transitioncontext completetransition:!transitioncontext.transitionwascancelled];}

At this point, we run the project, you can see from the Firstviewcontroller jump to Secondviewcontroller, you will see the animation effect of the picture move. Five, pop animation

However, when we click Back, the system is still the default animation. As long as we refer to the implementation of the previous push, we first let Secondviewcontroller follow the Uinavigationcontrollerdelegate protocol and implement the Uinavigationcontrollerdelegate method And returns an instance that inherits from NSObject and follows the Uiviewcontrolleranimatedtransitioning protocol (secondtransition in the demo). Implement Transitionduration: And Animatetransition in Secondtransition: Methods that return the transition time, and set the animation effect respectively. See Demo source code for details. vi. Use of transition interactions

Now that we have the user to interact through the left side of the screen, we need to use the Uiscreenedgepangesturerecognizer class in the iOS7.

We created the Uiscreenedgepangesturerecognizer in the Secondviewcontroller Viewdidload method

-(void) viewdidload {
    [super viewdidload];

    ...

    Uiscreenedgepangesturerecognizer *poprecognizer = [[Uiscreenedgepangesturerecognizer alloc] InitWithTarget:self Action: @selector (Handlepoprecognizer:)];
    Poprecognizer.edges = Uirectedgeleft;
    [Self.view Addgesturerecognizer:poprecognizer];
}

Now we can update another class by using the monitor gesture event: uipercentdriveninteractivetransition, which will change the progress of the transition animation according to our gestures.

When the gesture begins, we create and store a uipercentdriveninteractivetransition instance and then notify navigation controller to bounce the stack.

When gestures change, we update the uipercentdriveninteractivetransition according to the gesture's progress.

When the gesture is finished, if the gesture is dragged large enough, the transition animation is performed, or otherwise such as to cancel the transition, we call finishinteractivetransition or cancelinteractivetransition according to the situation.

-(void) Handlepoprecognizer: (uiscreenedgepangesturerecognizer*) recognizer {//Calculate How far the user has dragged
    Across the view cgfloat progress = [recognizer translationinview:self.view].x/(Self.view.bounds.size.width * 1.0);

    Progress = MIN (1.0, MAX (0.0, progress)); if (recognizer.state = = Uigesturerecognizerstatebegan) {//Create a interactive transition and pop the view Contr
        Oller self.interactivepoptransition = [[Uipercentdriveninteractivetransition alloc] init];
    [Self.navigationcontroller Popviewcontrolleranimated:yes]; else if (recognizer.state = uigesturerecognizerstatechanged) {//Update the interactive transition ' s PROGR
    ESS [Self.interactivepoptransition updateinteractivetransition:progress];  else if (recognizer.state = uigesturerecognizerstateended | | recognizer.state = = uigesturerecognizerstatecancelled) {//Finish or cancel the interactive transition if (Progress > 0.5) {[Self.interactivepoptransition finishinteractivetransition];
        else {[Self.interactivepoptransition cancelinteractivetransition];
    } self.interactivepoptransition = nil;


 }
}

Now that we create and update the Uipercentdriveninteractivetransition instance, we also need to tell navigation controller to use it and add it to Secondviewcontroller:

-(id<uiviewcontrollerinteractivetransitioning>) Navigationcontroller: (Uinavigationcontroller *) Navigationcontroller
                         Interactioncontrollerforanimationcontroller: (id< uiviewcontrolleranimatedtransitioning>) Animationcontroller {
    //Check If this is for our custom transition
    if ([Animationcontroller Iskindofclass:[dsltransitionfromsecondtofirst class]]) {return
        self.interactivepoptransition;
    }
    else {return
        nil;
    }
}

Run the demo, in the Secondviewcontroller, in the left edge of the screen to the middle horizontal slide, you will see the transition progress with our gestures and different.
References: http://dativestudios.com/blog/2013/09/29/interactive-transitions/IOS Animation by Tutorials 2.0

Think the above process is too complicated. Now can be a few lines of code to achieve the magic of the transition, please see my new article OH: http://blog.csdn.net/dolacmeng/article/details/56485140