iOS Simulation of Pop-up Effects of Apps like JianShu, Taobao, etc.

When using the Jianshu App, I found that the pop-up effect of this View is especially good and very smooth, so I tried to write one, which is basically consistent with the effect of the Jianshu App:

Let's start with the explanation:

1First of all, we need to know how many Views this page has? This page actually has four Views: self.view, the View rootVC.view of the white VC in the picture, the maskView on the white VC maskView, and the popped popView popView. We create them:

 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];
 //Add 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 button
 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];
 [closeBtn addTarget:self action:@selector(close) forControlEvents:UIControlEventTouchUpInside];
 [popView addSubview:closeBtn];
 popView;
}); 
 //Add VC's View method
 _rootVC.view.frame = self.view.bounds;
 _rootVC.view.backgroundColor = [UIColor whiteColor];
 _rootview = _rootVC.view;
 [self addChildViewController:_rootVC];
 [self.view addSubview:_rootview];
 //rootVC's maskView
 _maskView = ({
 UIView * maskView = [[UIView alloc]initWithFrame:self.view.bounds];
 5]
 maskView.alpha = 0;
 maskView;
 });
 [_rootview addSubview:_maskView];

2.Then to add a click event, here I used touchesBegan directly for convenience in my popup event

- (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]];
  //show maskView
  [_maskView setAlpha:0.5f];
  //popView rises
  _popView.frame = frame;
 } completion:^(BOOL finished) {
 };
 };
}

Here's something to note: the popview is added to the window like this: [[UIApplication sharedApplication].windows[0] addSubview:_popView];

Then the key layer deformation method comes

- (CATransform3D)firstTransform{
 CATransform3D t1 = CATransform3DIdentity;
 t1.m34 = 1.0/-900;
 //with a slight shrink effect
 t1 = CATransform3DScale(t1, 0.95, 0.95, 1);
 //rotate around the x-axis
 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 shrink
 t2 = CATransform3DScale(t2, 0.8, 0.8, 1);
 return t2;
}

You can see this, you should be able to find that there are actually two deformations here

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 hides
 [_maskView setAlpha:0.f];
 //popView descends
 _popView.frame = frame;
 //at the same time, it feels smoother
 [_rootview.layer setTransform:[self firstTransform]];
 } completion:^(BOOL finished) {
 [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
  //to the initial value
  [_rootview.layer setTransform:CATransform3DIdentity];
 } completion:^(BOOL finished) {
  //Remove
  [_popView removeFromSuperview];
 };
 };
}

Finally, the complete code has been encapsulated, and you can use the creation method after inheritance.

GitHub:Wzxhaha

That's all for this article. Hope it will be helpful to everyone's study, and also hope everyone will support the Yelling Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.)