UIView中有一個(gè)maskView屬性，這個(gè)屬性在iOS8之后開(kāi)始使用，用來(lái)表示視圖的遮罩。類(lèi)比于CALayer中的mask，他們的基本原理都是一樣的。
1.當(dāng)一個(gè)view設(shè)置了maskView后，那么它只會(huì)顯示與maskView重疊的部分(maskView跟view沒(méi)有層次，可以理解maskView嵌在View里)。
2.對(duì)于maskView與View重疊部分，可以這樣理解，是將maskView每個(gè)point的alpha賦值給View的重疊部分相對(duì)應(yīng)的point，這樣view的重疊每個(gè)point都有個(gè)alpha值了，view重疊部分就可能顯示多種透明色。
例子1：漸進(jìn)式顯示和隱藏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，滑動(dòng)解鎖效果
? ? 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=@"滑動(dòng)來(lái)解鎖 >>";
? ? 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
