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
