需求

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

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

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