IOS Drawer Effect

Original blog, reproduced please indicate the source

Blog.csdn.net/hello_hwc

First look at the demo effect

Video links are as follows

Http://v.youku.com/v_show/id_XODc1OTQwODQ0.html

The implementation process is as follows

1 Create a new project based on a single view. Drag into two viewcontroller, in order to differentiate, change to Firstviewcontroller and Secondviewcontroller in the outline. Drag along the red line in the control+ and select Show in the Pop-up window

2 Select Segue, add identifier for it: Pushsegue

3 to differentiate, set different backgroundcolor for each of the two Viewcontroller
4 drag into a imageview to Firstviewcontroller, then the next few pictures are centered on the ImageView setting AutoLayout settings
Guaranteed long-width constant
Then, update frame lets imageview in the correct position and then selects the picture for ImageView

5 then drag an object into the Navigationcontroller
6 Create a Cocoa class file that inherits from NSObject, named Navigationcontrollerdelegate, to follow uinavigationcontrollerdelegate

@interface navigationcontrollerdelegate:nsobject<uinavigationcontrollerdelegate>

7 Let the proxy for Navigationcontroller on storyboard be set to the dragged object, by right-clicking the Navigationcontroller in the outline and dragging the agent onto the object

8 then set a outlet for Navigationcontroller
9 Next is the process of the code, the complete code is as follows

NavigationControllerDelegate.h

#import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface navigationcontrollerdelegate: Nsobject<uinavigationcontrollerdelegate> @end

Navigationcontrollerdelegate.m

#import "NavigationControllerDelegate.h" #import "Animator.h" @interface navigationcontrollerdelegate () < Uigesturerecognizerdelegate> @property (strong,nonatomic) uipercentdriveninteractivetransition * Interactivctransition, @property (weak, nonatomic) Iboutlet Uinavigationcontroller *nav; @property (strong,nonatomic)    Uipangesturerecognizer * pangesture; @end @implementation navigationcontrollerdelegate//add gesture-(void) awakeFromNib{    Self.pangesture = [[Uipangesturerecognizer alloc] initwithtarget:self action: @selector (paned:)]; [Self.nav.view addGestureRecognizer:self.pangesture];}    Response gesture-(void) paned: (Uipangesturerecognizer *) Sender {if (Self.nav = = nil) {return;    } cgpoint translation; Switch (sender.state) {case Uigesturerecognizerstatebegan: {_interactivctransition = [[Uipercen            Tdriveninteractivetransition alloc] init];         if (Self.nav.viewControllers.count > 1) {[Self.nav popviewcontrolleranimated:yes];   } else{[Self.nav.topViewController performseguewithidentifier:@ "Pushsegue" sender:nil];        }} break;            Case uigesturerecognizerstatechanged:translation = [Sender TranslationInView:self.nav.view]; if (Self.nav.viewControllers.count > 1 && translation.x > 0) {cgfloat completionprogress = t                Ranslation.x/cgrectgetwidth (Self.nav.view.frame);            [Self.interactivctransition updateinteractivetransition:completionprogress]; } if (Self.nav.viewControllers.count = = 1 && translation.x < 0) {CGFloat Completionp                rogress =-translation.x/cgrectgetwidth (self.nav.view.frame);            [Self.interactivctransition updateinteractivetransition:completionprogress];        } break; Case Uigesturerecognizerstateended:if (self.nav.viewControllers.count >1 && [sender Velocityinview: Self.nav. view].x>0) {[Self.interactivctransition finishinteractivetransition]; }else if (self.nav.viewControllers.count <= 1 && [sender velocityinview:self.nav.view].x<0) {[            Self.interactivctransition Finishinteractivetransition];            }else{[Self.interactivctransition cancelinteractivetransition];        } break;            Case uigesturerecognizerstatecancelled: [Self.interactivctransition cancelinteractivetransition];        Break            Default: [Self.interactivctransition cancelinteractivetransition];            Self.interactivctransition = nil;    Break }}//navigationcontroller Proxy-Determines which object the animation interaction process is controlled by-(ID <UIViewControllerInteractiveTransitioning>) Navigationcontroller: (Uinavigationcontroller *) Navigationcontroller Interactioncontrollerforanima Tioncontroller: (ID <UIViewControllerAnimatedTransitioning>) animationcontroller{retUrn self.interactivctransition; }//navigationcontroller Agent-Determines how the animation is rendered-(id<uiviewcontrolleranimatedtransitioning>) Navigationcontroller: ( Uinavigationcontroller *) Navigationcontroller animationcontrollerforoperation: (uinavigatio                                                ncontrolleroperation) Operation Fromviewcontroller: (Uiviewcontroller *) FROMVC Toviewcontroller: (Uiviewcontroller *) tovc{return [[Animator alloc] Init ];} @end

Animator.h

#import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface Animator:nsobject < Uiviewcontrolleranimatedtransitioning> @end

Animator.m

animator.m//hwcfoundationexample////Created by Huangwenchen on 15/1/20.//Copyright (c) 2015 Huangwenchen. All rights reserved.//#import "Animator.h" @implementation animator//Animation Time-(Nstimeinterval) Transitionduration: (ID <UIViewControllerContextTransitioning>) transitioncontext{return 0.8;}    Process of animation-(void) Animatetransition: (id<uiviewcontrollercontexttransitioning>) transitioncontext{ uiviewcontroller* Fromviewcontroller = [Transitioncontext viewcontrollerforkey:    Uitransitioncontextfromviewcontrollerkey]; uiviewcontroller* Toviewcontroller = [Transitioncontext viewcontrollerforkey:    Uitransitioncontexttoviewcontrollerkey];    Uinavigationcontroller * nav = Toviewcontroller.navigationcontroller;    CGRect originframe = toViewController.view.frame;    CGRect offsetframe = Cgrectoffset (Originframe,-cgrectgetwidth (Originframe), 0);        if (Nav.viewControllers.count > 1) {[[Transitioncontext Containerview] addSubview:toViewController.view]; ToviewcOntroller.view.frame = Offsetframe; [UIView animatewithduration:[self Transitionduration:transitioncontext] animations:^{ToViewController.view.fra        me = Originframe; } completion:^ (BOOL finished) {[Transitioncontext completetransition:![        Transitioncontext Transitionwascancelled]];    }]; }else {[[Transitioncontext Containerview] InsertSubview:toViewController.view belowsubview:fromviewcontroller.v        Iew];        FromviewController.view.frame = Originframe; [UIView animatewithduration:[self Transitionduration:transitioncontext] animations:^{fromviewcontroller.view.f        Rame = Offsetframe; } completion:^ (BOOL finished) {[Transitioncontext completetransition:![                    Transitioncontext Transitionwascancelled]];    }]; }} @end

Part IIPrinciple: Here I interpret the drawer process as a toggle animation of two Viewcontroller. Then, the components of the toggle animation have the following parts

(1) The animation controller (Animation Controllers) complies with the Uiviewcontrolleranimatedtransitioning protocol and is responsible for the actual execution of the animation.
(2) the interactive controller (Interaction Controllers) controls an interactive transition by complying with the Uiviewcontrollerinteractivetransitioning protocol.
(3) The transition agent (transitioning Delegates) provides the required animation controller and interactive controller conveniently according to the different transition types.
(4) The transition context (transitioning contexts) defines the metadata required for the transition, such as the associated properties of the view Controller and view involved in the transition process. The transition context object complies with the Uiviewcontrollercontexttransitioning protocol and is generated and provided by the system.
(5) The Transition Coordinator (Transition coordinators) can run other animations in parallel while the transition animation is running. The transition coordinator complies with the Uiviewcontrollertransitioncoordinator protocol.

With Uinavigationcontroller, we just need to consider the animation controller and the interactive controller.

Animation interactivity provided by Uipercentdriveninteractivetransition

The animation controller is provided by customizing a class animator, followed by Uiviewcontrolleranimatedtransitioning, which has two functions that must be implemented, that is, two functions in the code.

The advantage of this is that the process of the animation itself and the Viewcontroller decoupling

Bty:demo still some imperfect place, wait for time I again optimize under

IOS Drawer Effect