maskview ios android,UIView的 maskView 属性

UIView中有一个maskView属性，这个属性在iOS8之后开始使用，用来表示视图的遮罩。类比于CALayer中的mask，他们的基本原理都是一样的。

1.当一个view设置了maskView后，那么它只会显示与maskView重叠的部分(maskView跟view没有层次，可以理解maskView嵌在View里)。

2.对于maskView与View重叠部分，可以这样理解，是将maskView每个point的alpha赋值给View的重叠部分相对应的point，这样view的重叠每个point都有个alpha值了，view重叠部分就可能显示多种透明色。

例子1：渐进式显示和隐藏UILabel

UIView*maskView = [[UIView alloc]initWithFrame:self.label.bounds];

CAGradientLayer *gradient = [CAGradientLayer layer];

gradient.frame= maskView.bounds;

gradient.colors=@[(__bridgeid)[UIColorclearColor].CGColor,(__bridgeid)[UIColorblackColor].CGColor,(__bridgeid)[UIColorclearColor].CGColor];

gradient.locations = @[@(0.01), @(0.1), @(0.9), @(0.99)];

gradient.startPoint=CGPointMake(0,0);

gradient.endPoint=CGPointMake(1,0);

[maskView.layeraddSublayer:gradient];

self.label.maskView= maskView;

[UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{

CGRect frame =  maskView.frame;

frame.origin.x+= frame.size.width;

maskView.frame= frame;

}completion:^(BOOLfinished) {

[UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{

CGRect frame = maskView.frame;

frame.origin.x-= frame.size.width;

maskView.frame= frame;

}completion:^(BOOLfinished) {

}];

}];

例子2，滑动解锁效果

CAGradientLayer *gradientLayer = [CAGradientLayer layer];

gradientLayer.frame=CGRectMake(0,200,200,64);

gradientLayer.colors=@[(__bridgeid)[UIColorblackColor].CGColor,

(__bridgeid)[UIColorwhiteColor].CGColor,

(__bridgeid)[UIColorblackColor].CGColor];

gradientLayer.locations=@[@0.25,@0.5,@0.75];

gradientLayer.startPoint=CGPointMake(0,0);

gradientLayer.endPoint=CGPointMake(1,0);

[self.view.layeraddSublayer:gradientLayer];

CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"locations"];

basicAnimation.fromValue=@[@0, @0,@0.25];

basicAnimation.toValue=@[@0.75, @1, @1];

basicAnimation.duration=2.5;

basicAnimation.repeatCount=HUGE;

[gradientLayeraddAnimation:basicAnimationforKey:nil];

UILabel*unlock = [[UILabelalloc]initWithFrame:gradientLayer.bounds];

unlock.alpha=0.5;

unlock.text=@"滑动来解锁 >>";

unlock.textAlignment = NSTextAlignmentCenter;

unlock.font = [UIFont boldSystemFontOfSize:30];

[self.viewaddSubview:unlock];

gradientLayer.mask= unlock.layer;

例子3，两图渐变显示

#import "TestViewController.h"

static const NSInteger horizontalCount =30;

static const NSInteger verticalCount =5;

@interface TestViewController ()

{

NSInteger count;

}

@property (nonatomic,strong) UIView *maskView;

@property (weak, nonatomic) IBOutlet UIImageView *downImage;

@property (weak, nonatomic) IBOutlet UIImageView *upImage;

@end

@implementationTestViewController

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

}

- (void)viewDidAppear:(BOOL)animated{

[super viewDidAppear:animated];

self.maskView= [[UIViewalloc]initWithFrame:self.upImage.bounds];

const CGFloat fadeWidth =CGRectGetWidth(self.maskView.bounds) /horizontalCount;

const CGFloat fadeHeight =CGRectGetHeight(self.maskView.bounds) /verticalCount;

for(NSIntegerline =0; line < horizontalCount; line ++) {

for(NSIntegerrow =0;row < verticalCount; row++) {

CGRectframe =CGRectMake(line*fadeWidth, row*fadeHeight, fadeWidth, fadeHeight);

UIView* fadeView = [[UIViewalloc]initWithFrame: frame];

fadeView.tag=  line*verticalCount+row+100;

fadeView.backgroundColor= [UIColor whiteColor];

[self.maskView addSubview: fadeView];

}

}

self.upImage.maskView = self.maskView;

[self animationFromLeft];

}

- (void)animationFromLeft

{

__weak typeof(self) weakSelf = self;

for(NSInteger line =0;line < horizontalCount; line ++) {

for(NSInteger row =0;row < verticalCount; row++) {

NSInteger idx = line*verticalCount+row;

UIView* fadeView = [self.maskView viewWithTag: idx+100];

[UIView animateWithDuration: 0.3 delay: 0.5*0.25*idx options: UIViewAnimationOptionCurveLinear animations: ^{

fadeView.alpha=0;

}completion:^(BOOLfinished) {

self->count++;

if (self->count == verticalCount*horizontalCount) {

[weakSelf animationFromRight];

}

}];

}

}

}

- (void)animationFromRight

{

__weak typeof(self) weakSelf = self;

for(NSInteger line =0;line < horizontalCount; line ++) {

for(NSInteger row =0;row < verticalCount; row++) {

NSInteger idx = verticalCount*horizontalCount-1-line*verticalCount-row;

UIView* fadeView = [self.maskViewviewWithTag: idx+100];

[UIView animateWithDuration: 0.3 delay: 0.5*0.25*(verticalCount*horizontalCount-1-idx) options: UIViewAnimationOptionCurveLinear animations: ^{

fadeView.alpha=1;

}completion:^(BOOLfinished) {

self->count--;

if(self->count==0) {

[weakSelf animationFromLeft];

}

}];

}

}

}

@end