iOS开发——view内缩弹窗

最新推荐文章于 2023-12-07 08:56:31 发布

LCLH

最新推荐文章于 2023-12-07 08:56:31 发布

阅读量543

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/IT_liuchengli/article/details/70821071

本文介绍了一种在iOS应用中实现底部弹窗效果的方法。通过设置控制器的背景颜色为黑色，并添加一个底部白色背景视图和一个弹出视图，结合UIView动画实现了平滑的弹出和关闭效果。

1. 实现的效果图如下：

2.实现原理：

控制器的self.view背景色为黑色

需要一个是底部白色的背景view:backgroundView
再一个底部弹出的view: topview

3.代码如下：

//
//  ViewInsidePopController.h
//  A-C
//
//  Created by 刘成利 on 2017/4/06.
//  Copyright © 2017年 刘成利. All rights reserved.
//

#import "NormalTitleViewController.h"

@interface ViewInsidePopController : NormalTitleViewController

@end

部分view是控制器父类创建好的

//
//  ViewInsidePopController.m
//  A-C
//
//  Created by 刘成利 on 2017/4/06.
//  Copyright © 2017年 刘成利. All rights reserved.
//

#import "ViewInsidePopController.h"

@interface ViewInsidePopController ()

@property (nonatomic, strong) UIView  *buttomView;   // 底部白色view
@property (nonatomic, strong) UIView  *topView;      // 弹出的view

@property (nonatomic, assign) BOOL  isShowTopView;   // 标记是否弹出


@end

@implementation ViewInsidePopController

- (void)viewDidLoad {
    [super viewDidLoad];

    
    self.view.backgroundColor = [UIColor blackColor];
    self.titleView.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:0.3]; //导航栏背景色
    
    
    self.buttomView = [[UIView alloc]initWithFrame:self.view.bounds];
    self.buttomView.backgroundColor = [UIColor cyanColor];
    [self.backgroundView addSubview:self.buttomView];
    
    // 半黑透明
    UIView * maskView = [[UIView alloc]initWithFrame:self.view.bounds];
    maskView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
    maskView.alpha = 0;
    maskView.tag   = 1000;
    [self.buttomView addSubview:maskView];

    
    
    // 初始化 弹出窗口
    self.topView = [[UIView alloc]initWithFrame:CGRectMake(0, [UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height /2.0)];
    
    self.topView.backgroundColor = [UIColor whiteColor];
    
    //加个阴影
    self.topView.layer.shadowColor = [UIColor blackColor].CGColor;
    self.topView.layer.shadowOffset = CGSizeMake(0.5, 0.5);
    self.topView.layer.shadowOpacity = 0.8;
    self.topView.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];
    [self.topView addSubview:closeBtn];
    
    
    

}

// 展现
- (void)show{
    
    self.isShowTopView = YES;
    self.titleView.hidden = YES;
    
    
    UIWindow  *window = [UIApplication sharedApplication].keyWindow;
    [window addSubview:self.topView];
    
    CGRect frame = self.topView.frame;
    frame.origin.y = self.view.frame.size.height/2.0;
    
    [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        
        [self.backgroundView.layer setTransform:[self firstTransform]];
        
    } completion:^(BOOL finished) {
        
        [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            
            [self.backgroundView.layer setTransform:[self secondTransform]];
            //显示maskView
            UIView *maskView = [self.view viewWithTag:1000];
            [maskView setAlpha:0.5f];
            //popView上升
            self.topView.frame = frame;
            
        } completion:^(BOOL finished) {
            
        }];
        
    }];



}

- (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;
}


// 关闭
- (void)close{

        
        CGRect frame = self.topView.frame;
        frame.origin.y += self.view.frame.size.height/2.0;
        
        [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            
            //maskView隐藏
            UIView *maskView = [self.view viewWithTag:1000];
            [maskView setAlpha:0.0f];
            //popView下降
            self.topView.frame = frame;
            
        } completion:^(BOOL finished) {
            
            [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                //变为初始值
                [self.backgroundView.layer setTransform:CATransform3DIdentity];
                
            } completion:^(BOOL finished) {
                
                //移除
                [self.topView removeFromSuperview];
                self.isShowTopView = NO;
                self.titleView.hidden = NO;
              
            }];
            
        }];
        
        
        [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            
            //和上个动画同时进行 感觉更丝滑
            [self.backgroundView.layer setTransform:[self firstTransform]];
            
        } completion:^(BOOL finished) {
            
            
            
        }];
        
        
    


}



- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    if (self.isShowTopView == NO) {
        
        [self show];
    }
    
    
}

@end