Implement "mobile QQ" side-by-side menu--Wuo

Basic Data acquisition

After experience, mobile phone QQ should be linear animation, that is, the scale of the view of the screen and so casually refers to the sliding distance in the form of an equation change.

Extract the basic data and slide the right side to reach the maximum amplitude:

1, the right side view left border distance from the left edge of the screen for the ratio of screen width is: 78%

2, the right side view of the height of the screen height of the ratio of: 77%

Step into the implementation of:

1, realize the zoom slide of the main view;

2, realize the linkage between the main view and the left;

The first step is to implement the zoom slide

Prior to the hands-on reference to some of the similar demo, found that many are using gesture uipangesturerecognizer to achieve, and this article will be used Uitouch. and use the following two touch trigger events:

-(void) Touchesbegan: (Nsset *) touches withevent: (uievent *)event-(void) touchesended: ( Nsset *) touches withevent: (uievent *)event

Principle:

Main view MAINVC move and zoom:

①. The x-coordinate of the main view Frmae = The x-coordinate of the primary view Frmae + The x-axis total offset offset of the finger slide;

#pragmaMark-the finger moves on the screen-(void) touchesmoved: (Nsset *) touches withevent: (Uievent *)Event{       if([EventTouchesforview:_mainvc.view]) {                //Get Uitouch ObjectUitouch *touch =[touches anyobject]; //gets the current pointCgpoint Currentpoint =[Touch LocationInView:self.view]; //Get previous pointCgpoint Prepoint =[Touch PreviousLocationInView:self.view]; //X-axis offset: How much x is offset when the finger moves a little bitCGFloat OffsetX = currentpoint.x-Prepoint.x; //sets the frame of the current main view_mainvc.view.frame =[self getcurrentframewithoffsetx:offsetx]; //Move Gradient effect (clear-dark)_blackcover.alpha = (1-_mainvc.view.frame.origin.x/rtarget);     }        //decide whether to drag or click Tap_isdraging =YES;}

②. Zoom ratio of the main view:

//when the finger is shifted a little, the frame of the current main view is acreage from the offset of the x-axis-(CGRect) Getcurrentframewithoffsetx: (cgfloat) offsetx{//Gets the y-axis offset, and the y-axis offsets how much each finger movesCGFloat OffsetY = OffsetX * _maxoffesthight/ScreenWidth; //Zoom out per moveCGFloat scale = (ScreenHeight-2* OffsetY)/ScreenHeight;#if0if(OffsetX <0&& _mainvc.view.frame.origin.x <=0)    {        //Swipe leftScale = (screenh +2* OffsetY)/screenh; }#endif        //get the previous frame *************** limit to show only left view! CGRect frame =_mainvc.view.frame; if((FRAME.ORIGIN.X+OFFSETX) >=0) frame.origin.x+=OffsetX; Elseframe.origin.x=0; Frame.size.height= Frame.size.height *Scale ; Frame.size.width= Frame.size.width *Scale ; FRAME.ORIGIN.Y= (screenheight-frame.size.height)/2.0;       returnframe;}

/** when the finger is offset a little, acreage the frame **/of the current view according to the offset of the x-axis

Gets the y-axis offset, and the y-axis offsets how much each finger moves

CGFloat OffsetY = OffsetX * _maxoffesthight/screenwidth;

Zoom Out per move

CGFloat scale = (screenHeight-2 * offsetY)/screenheight;

CGRect frame = _mainvc.view.frame;

... ...

Position change and size scaling of the/** main view **/

Frame.origin.x + = OffsetX;

Frame.size.height = Frame.size.height *scale;

Frame.size.width = Frame.size.width *scale;

FRAME.ORIGIN.Y = (screenheight-frame.size.height)/2.0;

... ...

The second step is to realize the linkage between the main view and the left

Principle:

The point is to find a linear relationship, and then linkage can do this:
1, this is the scale of the Leftvc.view:

Find these two points (0.77, 0) (1, screenwidth* 0.78), i.e. (Left.view scale, main.view.x coordinates), which can be linearly related:

CGFloat Leftscale = ((1 -_minsclae)/(ScreenWidth * _boundscale)) *_mainvc.view.frame.origin.x + _minSclae;     = _mainvc.view.frame.origin.x >= screenwidth * _boundscale? SELF.VIEW.CENTER.X:LEFTCX;

2, this is the movement of Leftvc.view:

Find these two points (self.view.center.x, ScreenWidth * 0.78) (center-80, 0), i.e. (coordinates of the center point X of the screen, main.view.or.x coordinates), which can be linearly related:

    CGFloat leftcx = (_leftcenterfactor/(ScreenWidth * _boundscale)) *_mainvc.view.frame.origin.x + screenWidth/2 - _leftcenterfactor;     1 1 : Leftscale;

3. Last Move and Zoom:

_leftvc.view.center = Cgpointmake (leftcx, self.view.center.y);     = Cgaffinetransformscale (cgaffinetransformidentity, Leftscale, Leftscale);

Full code:

/** * Open Left View linkage event*/- (void) startedleftviewlinkage{//performing the left view linkage animation//(self.view.center.x, ScreenWidth * 0.78) (center-80, 0) ==> (center point x coordinates, main.view.or.x coordinates), linear relationshipCGFloat leftcx = (_leftcenterfactor/(ScreenWidth * _boundscale)) *_mainvc.view.frame.origin.x + screenWidth/2-_leftcenterfactor; LEFTCX= _mainvc.view.frame.origin.x >= screenwidth * _boundscale?self.view.center.x:leftcx; //(0.77, 0) (1, screenwidth*0.78) = = (Left.view scale, main.view.or.x coordinate), linear relationshipCGFloat Leftscale = ((1-_minsclae)/(ScreenWidth * _boundscale)) *_mainvc.view.frame.origin.x +_minsclae; Leftscale= Leftscale >=1?1: Leftscale; _leftvc.view.center=Cgpointmake (LEFTCX, SELF.VIEW.CENTER.Y); _leftvc.view.transform=Cgaffinetransformscale (cgaffinetransformidentity, Leftscale, Leftscale);}

The above is the analysis of the relationship between the moving and zooming of the left and the main view, and the key of sliding is to find the intrinsic dynamic relation between the view. According to this method can achieve high imitation, the realization of the basic effect of the same as mobile phone QQ.

Implement "mobile QQ" side-by-side menu--Wuo