maskView（maskLayer）基本原理

png图片透明像素的原理（只有png才有透明度概念，jpg没有）
maskView（maskLayer）可类比于多张png图片的叠加遮罩，原理类似
maskView是iOS8以上才有的，如果要考虑兼容低版本，用maskLayer替换

代码

// 使用maskView的情况

UIImageView *mask = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, width, width)];
mask.image = [UIImage imageNamed:@"mask"];

self.addImageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20 + (width + 20) * 2, width, width)];
self.addImageView.image = [UIImage imageNamed:@"base"];
// maskView并不能用addSubview来添加遮罩,这点千万注意
self.addImageView.maskView = mask;
[self.view addSubview:self.addImageView];

//赋值给上面的mask，在iOS8以下采用
//self.addImageView.layer.mask
//CALayer *layer,

maskView配合CAGradientLayer的使用

用CAGradientLayer直接产生带透明像素通道的layer
用maskView直接加载带CAGradientLayer的view
可以通过对CAGradientLayer进行动画的操作实现动画效果

代码

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

// 加载图片
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 200, 200)];
imageView.image        = [UIImage imageNamed:@"base"];
[self.view addSubview:imageView];

// 创建出CAGradientLayer
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame            = imageView.bounds;
gradientLayer.colors           = @[(__bridge id)[UIColor clearColor].CGColor,
                                   (__bridge id)[UIColor blackColor].CGColor,
                                   (__bridge id)[UIColor clearColor].CGColor];
gradientLayer.locations        = @[@(0.25), @(0.5), @(0.75)];
gradientLayer.startPoint       = CGPointMake(0, 0);
gradientLayer.endPoint         = CGPointMake(1, 0);

// 容器view --> 用于加载创建出的CAGradientLayer
UIView *containerView = [[UIView alloc] initWithFrame:imageView.bounds];
[containerView.layer addSublayer:gradientLayer];

// 设定maskView
imageView.maskView  = containerView;

CGRect frame        = containerView.frame;
frame.origin.x     -= 200;

// 重新赋值
containerView.frame = frame;

// 给maskView做动画效果
[UIView animateWithDuration:3.f animations:^{
    // 改变位移
    CGRect frame        = containerView.frame;
    frame.origin.x     += 400;

    // 重新赋值
    containerView.frame = frame;
}];
}

maskView配合带alpha通道图片的使用

直接使用带alpha通道的png图片比用CAGradientLayer的方式更加高效
可以使用技巧在maskView上添加多张图片
在maskView中做简单的动画

代码

- (void)viewDidLoad {
[super viewDidLoad];

// 前景图
UIImageView *background = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
background.image        = [UIImage imageNamed:@"base"];
background.center       = self.view.center;
[self.view addSubview:background];


// 背景图
UIImageView *upGround = [[UIImageView alloc] initWithFrame:background.frame];
upGround.image        = [UIImage imageNamed:@"background"];
[self.view addSubview:upGround];


// maskView
UIView *mask      = [[UIView alloc] initWithFrame:upGround.bounds];
upGround.maskView = mask;


// 图片1
UIImageView *picOne = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 400)];
picOne.image        = [UIImage imageNamed:@"1"];
[mask addSubview:picOne];


// 图片2
UIImageView *picTwo = [[UIImageView alloc] initWithFrame:CGRectMake(100, -200, 100, 400)];
picTwo.image        = [UIImage imageNamed:@"2"];
[mask addSubview:picTwo];


// 动画
[UIView animateWithDuration:4.f delay:5.f options:0 animations:^{
    picOne.y -= 400;
    picTwo.y += 400;
} completion:^(BOOL finished) {

}];
}

设计文本横向渐变消失的控件

接口的设计
封装CAGradientLayer用以提供mask遮罩
动画样式的分析与设计

设计动画函数的格式

// - (void)fadeRight
//将持续时间和是否执行动画设计进去
- (void)fadeRightWithDuration:(NSTimeInterval)duration animated:(BOOL)animated;

代码

- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {

    // 创建出label
    [self createLabel:self.bounds];

    // 创建出mask
    [self createMask:self.bounds];

}
return self;
}

- (void)createLabel:(CGRect)frame {
self.label               = [[UILabel alloc] initWithFrame:frame];
self.label.font          = [UIFont systemFontOfSize:30.f];
self.label.textAlignment = NSTextAlignmentCenter;
self.label.textColor     = [UIColor redColor];

[self addSubview:self.label];
}

- (void)createMask:(CGRect)frame {

// 创建出渐变的layer
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame            = frame;
gradientLayer.colors           = @[(__bridge id)[UIColor clearColor].CGColor,
                                   (__bridge id)[UIColor blackColor].CGColor,
                                   (__bridge id)[UIColor blackColor].CGColor,
                                   (__bridge id)[UIColor clearColor].CGColor];
gradientLayer.locations        = @[@(0.01), @(0.1), @(0.9), @(0.99)];
gradientLayer.startPoint       = CGPointMake(0, 0);
gradientLayer.endPoint         = CGPointMake(1, 0);

// 创建并接管mask
self.mask     = [[UIView alloc] initWithFrame:frame];

// mask获取渐变layer
[self.mask.layer addSublayer:gradientLayer];

self.maskView = self.mask;
}

- (void)fadeRight {

[UIView animateWithDuration:3.f animations:^{
    CGRect frame    = self.mask.frame;
    frame.origin.x += frame.size.width;

    self.mask.frame = frame;
}];

}

//重写setter,getter方法

@synthesize text = _text;
- (void)setText:(NSString *)text {
_text           = text;
self.label.text = text;
}
- (NSString *)text {
return _text;
}