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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.