iOS仿简书、淘宝等App的View弹出效果

用简书app的时候觉得这个view的弹出效果特别好，而且非常平滑，所以我就尝试写了一个，和简书app上的效果基本一致了:

下面开始讲解:

1.首先我们要知道这个页面有几个view？这个页面其实有四个view，self.view , 图中白色vc的view rootvc.view ,白色vc上的maskview maskview , 以及弹出的popview popview 。我们创建它们：

 self.view.backgroundcolor = [uicolor blackcolor];
 
 _popview = ({
  uiview * popview = [[uiview alloc]initwithframe:cgrectmake(0, [uiscreen mainscreen].bounds.size.height, [uiscreen mainscreen].bounds.size.width, [uiscreen mainscreen].bounds.size.height /2.0)];
 
  popview.backgroundcolor = [uicolor graycolor];
 
  //加个阴影
  popview.layer.shadowcolor = [uicolor blackcolor].cgcolor;
  popview.layer.shadowoffset = cgsizemake(0.5, 0.5);
  popview.layer.shadowopacity = 0.8;
  popview.layer.shadowradius = 5;
 
  //关闭btn
  uibutton * closebtn = [uibutton buttonwithtype:uibuttontypecustom];
  closebtn.frame = cgrectmake(15, 0, 50, 40);
  [closebtn settitle:@"关闭" 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;
}); 
 
 //添加vc的view的方法
 _rootvc.view.frame = self.view.bounds;
 _rootvc.view.backgroundcolor = [uicolor whitecolor];
 _rootview = _rootvc.view;
 [self addchildviewcontroller:_rootvc];
 [self.view addsubview:_rootview];
 
 //rootvc上的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.然后要添加点击事件，这里为了方便我的弹出事件直接用的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]];
   //显示maskview
   [_maskview setalpha:0.5f];
   //popview上升
   _popview.frame = frame;
 
  } completion:^(bool finished) {
 
  }];
 
 }];
 
}

这里要注意一下的就是popview是添加到window上面的:[[uiapplication sharedapplication].windows[0] addsubview:_popview];

然后关键的layer形变方法来了

- (catransform3d)firsttransform{
 catransform3d t1 = catransform3didentity;
 t1.m34 = 1.0/-900;
 //带点缩小的效果
 t1 = catransform3dscale(t1, 0.95, 0.95, 1);
 //绕x轴旋转
 t1 = catransform3drotate(t1, 15.0 * m_pi/180.0, 1, 0, 0);
 return t1;

}

- (catransform3d)secondtransform{

 catransform3d t2 = catransform3didentity;
 t2.m34 = [self firsttransform].m34;
 //向上移
 t2 = catransform3dtranslate(t2, 0, self.view.frame.size.height * (-0.08), 0);
 //第二次缩小
 t2 = catransform3dscale(t2, 0.8, 0.8, 1);
 return t2;
}

大家可以看到这，应该可以发现这里其实有两次形变

3.隐藏动画

- (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隐藏
  [_maskview setalpha:0.f];
  //popview下降
  _popview.frame = frame;
  //同时进行 感觉更丝滑
  [_rootview.layer settransform:[self firsttransform]];
 
 } completion:^(bool finished) {
 
  [uiview animatewithduration:0.3 delay:0 options:uiviewanimationoptioncurveeaseinout animations:^{
   //变为初始值
   [_rootview.layer settransform:catransform3didentity];
 
  } completion:^(bool finished) {
 
   //移除
    [_popview removefromsuperview];
  }];
 
 }];
 
 
}

最后，完整代码，已经封装好了，继承之后使用创建方法就行了

github:wzxhaha

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。