需求 - 23 - 带朦胧的遮罩效果 - 1

最新推荐文章于 2024-04-03 09:59:14 发布

绘风铃

最新推荐文章于 2024-04-03 09:59:14 发布

阅读量437

点赞数

分类专栏：面向需求的编程文章标签： iOS

本文链接：https://blog.csdn.net/u013743777/article/details/70853642

版权

面向需求的编程专栏收录该内容

30 篇文章 0 订阅

订阅专栏

Coding应用中有一个点击出现遮罩层效果，这里把它抽离出来

首先用到了：XHRealTimeBlur 这个开源的控件，具体的实现可以去看看，是用属性绑定加CAGradientLayer实现的

将这个控件封装一层：

#import <UIKit/UIKit.h>

@interface PopFliterView : UIView

@property (assign) BOOL showStatus;
@property (nonatomic, copy) void (^clickBlock)(NSInteger selectNum);
@property (nonatomic, copy) void (^closeBlock)();

- (instancetype)initWithFrame:(CGRect)frame items:(NSArray *)items;

- (void)showMenuAtView:(UIView *)containerView;

- (void)dismissMenu;

@end

实现：

#import "PopFliterView.h"

#import "XHRealTimeBlur.h"
#import "pop.h"
#import "LBMacroHeader.h"
#import "LBCommonHeader.h"

@interface PopFliterView ()

@property (nonatomic, strong) XHRealTimeBlur *realTimeBlur;

@property (nonatomic, strong) UIImageView* imageView;

@end

@implementation PopFliterView

- (id)initWithFrame:(CGRect)frame items:(NSArray *)items
{
    self = [super initWithFrame:frame];
    
    if (self)
    {
        self.showStatus = FALSE;
        [self setup];
    }
    return self;
}

- (void)setup
{
    self.backgroundColor = [UIColor clearColor];
    
    _realTimeBlur = [[XHRealTimeBlur alloc] initWithFrame:self.bounds];
    _realTimeBlur.blurStyle = XHBlurStyleTranslucentWhite;
    _realTimeBlur.showDuration = 0.1;
    _realTimeBlur.disMissDuration = 0.2;
    
    typeof(self) __weak weakSelf = self;

    _realTimeBlur.willShowBlurViewcomplted = ^(void){
    
        POPBasicAnimation *alphaAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
        alphaAnimation.fromValue = @0.0;
        alphaAnimation.toValue   = @1.0;
        alphaAnimation.duration  = 0.3f;
        [weakSelf.imageView pop_addAnimation:alphaAnimation forKey:@"alphaAnimationS"];
    };
    
    _realTimeBlur.willDismissBlurViewCompleted = ^(void){
        
        POPBasicAnimation *alphaAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
        alphaAnimation.fromValue = @1.0;
        alphaAnimation.toValue   = @0.0;
        alphaAnimation.duration  = 0.2f;
        [weakSelf.imageView pop_addAnimation:alphaAnimation forKey:@"alphaAnimationE"];
    };
    
    _realTimeBlur.didDismissBlurViewCompleted = ^(BOOL finished){
        [weakSelf removeFromSuperview];
    };
    
    _realTimeBlur.hasTapGestureEnable = YES;
    
    // 还可以在这里放置图片
//    _imageView = ({
//        
//        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"lufy.jpg"]];
//        [imageView setFrame:CGRectMake(0, 0, 150, 300)];
//        [imageView setCenter:self.center];
//        imageView;
//    });
    
    [self addSubview:_imageView];
}

#pragma mark -- event & action

- (void)showMenuAtView:(UIView *)containerView
{
    _showStatus = TRUE;
    [containerView addSubview:self];
    [_realTimeBlur showBlurViewAtView:self];
}

- (void)dismissMenu
{
    _showStatus=FALSE;
    [_realTimeBlur disMiss];
}

@end

调用处：

#import "FliterMenuThirdViewController.h"

#import "PopFliterView.h"

// 宏参数
#import "LBCommonHeader.h"
#import "LBMacroHeader.h"

@interface FliterMenuThirdViewController ()
@property (nonatomic, strong) UIButton *button;
@property (nonatomic, strong) PopFliterView *myFliterView;
@end

@implementation FliterMenuThirdViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.view setBackgroundColor:[UIColor lightGrayColor]];
    
    _button = [UIButton buttonWithType:UIButtonTypeCustom];
    [_button setFrame:CGRectMake(0, 0, 45, 45)];
    [_button setBackgroundImage:[UIImage imageNamed:@"filtertBtn_normal_Nav"] forState:UIControlStateNormal];
    [_button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [_button setCenter:self.view.center];
    [self.view addSubview:_button];
    
    [self setupFliterView];
}

// 配置PopFliterView ， 初始化
- (void)setupFliterView
{
    _myFliterView = [[PopFliterView alloc] initWithFrame:CGRectMake(0, 0, kScreen_Width, kScreen_Height) items:nil];
    
    __weak typeof(self) weakSelf = self;
    
    _myFliterView.clickBlock = ^(NSInteger pageIndex){
        
        [weakSelf fliterBtnClose:TRUE];
    };
    
    _myFliterView.closeBlock = ^{
        
        [weakSelf closeFliter];
    };
}

- (void)closeFliter
{
    if ([_myFliterView showStatus]) { [_myFliterView dismissMenu]; }
}

- (void)fliterBtnClose:(BOOL)status
{
    [_button setImage:status?[UIImage imageNamed:@"filtertBtn_normal_Nav"]:[UIImage imageNamed:@"filterBtn_selected_Nav"] forState:UIControlStateNormal];
}

- (void)buttonClicked:(id)sender
{
    if (_myFliterView.showStatus)
    {
        [self fliterBtnClose:TRUE];
        [_myFliterView dismissMenu];
        
    }
    else
    {
        [self fliterBtnClose:FALSE];
        [_myFliterView showMenuAtView:self.view];
    }
}

@end

这样就可以实现带朦胧效果的遮罩了

但是我们还能更好地去实现这个功能，请看下一个文章