IOS Imitation Jane Book, Taobao and other app view pop-up effect _ios

With the simple book app, I think this view pop-up effect is particularly good, and very smooth, so I tried to write a, and Jane book app on the effect of basically the same:

Here's how to start:

1. First we need to know how many view this page has? This page actually has four View,self.view, the picture in the White VC view Rootvc.view, the white VC on the Maskview Maskview, as well as the pop-up Popview Popview. We create them:

 Self.view.backgroundColor = [Uicolor blackcolor]; _popview = ({UIView * popview = [[UIView alloc]initwithframe:cgrectmake (0, UIScreen mainscreen].bounds.size.height, [U
 
  Iscreen mainscreen].bounds.size.width, [UIScreen mainscreen].bounds.size.height/2.0)];
 
  Popview.backgroundcolor = [Uicolor Graycolor]; Add a shadow PopView.layer.shadowColor = [Uicolor blackcolor].
  Cgcolor;
  PopView.layer.shadowOffset = Cgsizemake (0.5, 0.5);
  popView.layer.shadowOpacity = 0.8;
 
  PopView.layer.shadowRadius = 5;
  Close BTN UIButton * closebtn = [UIButton buttonwithtype:uibuttontypecustom];
  Closebtn.frame = CGRectMake (15, 0, 50, 40);
  [Closebtn settitle:@ "close" forstate:uicontrolstatenormal]; [Closebtn settitlecolor:[uicolor colorwithred:217/255.0 green:110/255.0 blue:90/255.0 alpha:1] ForState:
  UIControlStateNormal];
  [Closebtn addtarget:self Action: @selector (Close) forcontrolevents:uicontroleventtouchupinside];
  [Popview ADDSUBVIEW:CLOSEBTN];
Popview; 
 
 }); How to add a view to VC _ROOTVC. view.frame = Self.view.bounds;
 _rootvc.view.backgroundcolor = [Uicolor Whitecolor];
 _rootview = _rootvc.view;
 [Self ADDCHILDVIEWCONTROLLER:_ROOTVC];
 
 [Self.view Addsubview:_rootview];
  ROOTVC on the Maskview _maskview = ({UIView * maskview = [[UIView alloc]initwithframe:self.view.bounds];
  Maskview.backgroundcolor = [Uicolor colorwithwhite:0 alpha:0.5];
  Maskview.alpha = 0;
 Maskview;
  });


 [_rootview Addsubview:_maskview];

2. Then to add click events, here to facilitate my pop-up events directly with the Touchesbegan

-(void) show
{[
 [uiapplication sharedapplication].windows[0] addsubview:_popview];
 
 CGRect frame = _popview.frame;
 FRAME.ORIGIN.Y = self.view.frame.size.height/2.0;
 
 [UIView animatewithduration:0.3 delay:0 options:uiviewanimationoptioncurveeaseinout animations:^{
 
  [_ Rootview.layer settransform:[self Firsttransform]];
 
 } completion:^ (BOOL finished) {
 
  [UIView animatewithduration:0.3 delay:0 options: Uiviewanimationoptioncurveeaseinout animations:^{
 
   [_rootview.layer settransform:[self SecondTransform]];
   Display Maskview
   [_maskview setalpha:0.5f];
   Popview rise
   _popview.frame = frame;
 
  } completion:^ (BOOL finished) {
 
  }];
 
 }
 

Note here that the Popview is added to the window above: [[UIApplication sharedapplication].windows[0] addsubview:_popview];

Then the key layer deformation method came up.

-(CATRANSFORM3D) firsttransform{
 catransform3d t1 = catransform3didentity;
 T1.M34 = 1.0/-900;
 With dot narrowing effect
 t1 = Catransform3dscale (T1, 0.95, 0.95, 1);
 Round x axis rotation
 t1 = catransform3drotate (T1, 15.0 * m_pi/180.0, 1, 0, 0);
 return t1;

}

-(CATRANSFORM3D) secondtransform{

 catransform3d t2 = catransform3didentity;
 T2.M34 = [self firsttransform].m34;
 Move up
 t2 = catransform3dtranslate (t2, 0, Self.view.frame.size.height * ( -0.08), 0);
 Second narrowing
 t2 = Catransform3dscale (T2, 0.8, 0.8, 1);
 return t2;
}

You can see this, it should be found that there are actually two times deformation

3. Hide Animation

-(void) Close
{
 _isshow = NO;
 
 CGRect frame = _popview.frame;
 FRAME.ORIGIN.Y + = self.view.frame.size.height/2.0;
 
 [UIView animatewithduration:0.3 delay:0 options:uiviewanimationoptioncurveeaseinout animations:^{
 
  //maskview Hidden
  [_maskview setalpha:0.f];
  Popview descent
  _popview.frame = frame;
  Feel more silky at the same time
  [_rootview.layer settransform:[self Firsttransform]];
 
 completion:^ (BOOL finished) {
 
  [ UIView animatewithduration:0.3 delay:0 options:uiviewanimationoptioncurveeaseinout animations:^{
   //into initial value
   [_rootview.layer settransform:catransform3didentity];
 
  } completion:^ (BOOL finished) {
 
   //removal
    [_popview removefromsuperview];}
  ];}
 
 ];
 
 

Finally, the complete code, already encapsulated, is inherited and then used to create the method.

Github:wzxhaha

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.