1.maskView(maskLayer) 基本原理 ：可类比于多张png图片叠加遮罩

2.maskView配合CAGradientLayer，alpha通道图片的使用.maskView是iOS8以上才有，假设要考虑兼容低版本号，用maskLayer替换

3.设计方本横向渐变消失的控件

一、两张png图片叠加遮罩

- (void)addMaskView

{

    CGFloat width = 120;

    // 使用maskView的情况

    UIImageView *addImageView= [[UIImageViewalloc] initWithFrame:CGRectMake(20,20 , width, width)];

    [self.view addSubView: addImageView];

    addImageView.image      = [UIImageimageNamed:@"base"];

    UIImageView *mask       = [[UIImageViewalloc] initWithFrame:CGRectMake(0,0, width, width)];

    mask.image              = [UIImageimageNamed:@"mask"];

    // maskView并不能用addSubview来加入遮罩,这点千万注意

    addImageView.maskView   = mask;

}

二、maskView 配合 CAGradientLayer 的使用

1.用CAGradientLayer直接产生带透明像素通道的layer

2.用maskView直接载入带CAGradientLayer的view

3.能够通过对CAGradientLayer进行动画的操作实现动画效果

- (void)addGradientLayer {

    // 载入图片

    UIImageView *imageView = [[UIImageViewalloc] initWithFrame:CGRectMake(20,20,200, 200)];

    imageView.image        = [UIImageimageNamed:@"base"];

    [self.viewaddSubview:imageView];

    // 创建出CAGradientLayer，

    //能够对gradientLayer的frame,colors.locations.startPoint,endPoint进行动画效果

    CAGradientLayer *gradientLayer = [CAGradientLayerlayer];

    gradientLayer.frame            = imageView.bounds;

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

                                      (__bridgeid)[UIColorblackColor].CGColor,

                                      (__bridgeid)[UIColorclearColor].CGColor];

    gradientLayer.locations        =@[@(0.25),@(0.5),@(0.75)];//设置位置点

    gradientLayer.startPoint       =CGPointMake(0,0);//设置方向

    gradientLayer.endPoint         =CGPointMake(1,0);

    // 容器view --> 用于载入创建出的CAGradientLayer

    UIView *containerView = [[UIViewalloc] initWithFrame:imageView.bounds];

    [containerView.layeraddSublayer:gradientLayer];

    // 设定maskView

    imageView.maskView  = containerView;

    CGRect frame        = containerView.frame;

    frame.origin.x     -=200;

    // 又一次赋值

    containerView.frame = frame;

    // 给maskView做动画效果

    [UIViewanimateWithDuration:3.fanimations:^{

        // 改变位移

        CGRect frame        = containerView.frame;

        frame.origin.x     +=400;

        // 又一次赋值

        containerView.frame = frame;

    }];

}

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

1.新建一个类

@interface FadeString :UIView

/**

 *  输入文本

 */

@property (nonatomic,strong) NSString *text;

/**

 *  向右渐变消失

 */

- (void)fadeRight;

- (void)fadeRightWithDuration:(NSTimeInterval)druation animaited:(BOOL)animated;

@end

#import "FadeString.h"

@interface FadeString ()

@property (nonatomic,strong)UILabel *label;

@property (nonatomic,strong)UIView  *mask;// 作为遮罩的mask

@end

@implementation FadeString

- (instancetype)initWithFrame:(CGRect)frame {

    self = [superinitWithFrame:frame];

    if (self) {

        // 创建出label

        [selfcreateLabel:self.bounds];

        // 创建出mask

        [selfcreateMask:self.bounds];

    }

    return self;

}

- (void)createLabel:(CGRect)frame {

    self.label               = [[UILabelalloc] initWithFrame:frame];

    self.label.font          = [UIFontsystemFontOfSize:30.f];

    self.label.textAlignment = NSTextAlignmentCenter;

    self.label.textColor     = [UIColorredColor];

    [selfaddSubview:self.label];

}

- (void)createMask:(CGRect)frame {

    // 创建出渐变的layer

    CAGradientLayer *gradientLayer = [CAGradientLayerlayer];

    gradientLayer.frame            = frame;

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

                                      (__bridgeid)[UIColorblackColor].CGColor,

                                      (__bridgeid)[UIColorblackColor].CGColor,

                                      (__bridgeid)[UIColorclearColor].CGColor];

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

    gradientLayer.startPoint       =CGPointMake(0,0);

    gradientLayer.endPoint         =CGPointMake(1,0);

    // 创建并接管mask

    self.mask     = [[UIViewalloc] initWithFrame:frame];

    // mask获取渐变layer

    [self.mask.layeraddSublayer:gradientLayer];

    self.maskView =self.mask;

}

- (void)fadeRight {

    [UIViewanimateWithDuration:3.fanimations:^{

        CGRect frame    = self.mask.frame;

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

        self.mask.frame = frame;

    }];

}

- (void)fadeRightWithDuration:(NSTimeInterval)druation animaited:(BOOL)animated

{

    if (animated) {

        [UIViewanimateWithDuration:druation animations:^{

            CGRect frame    = self.mask.frame;

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

            self.mask.frame = frame;

        }];

    }else{

        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;

}

@end

- (void)viewDidLoad {

    [superviewDidLoad];

    self.view.backgroundColor = [UIColorblackColor];

    // 创建FadeString

    FadeString *fadeString = [[FadeStringalloc] initWithFrame:CGRectMake(0,0,300, 40)];

    fadeString.text        =@"hello world";

    fadeString.center      =self.view.center;

    [self.viewaddSubview:fadeString];

    // 运行动画效果

    [fadeStringfadeRight];

}

二、切换图片

@interface TranformFadeView :UIView

/**

 *  Image显示方式

 */

@property (nonatomic)UIViewContentMode  contentMode;

/**

 *  要显示的相片

 */

@property (nonatomic,strong) UIImage   *image;

/**

 *  垂直方向方块的个数

 */

@property (nonatomic)NSInteger          verticalCount;

/**

 *  水平的个数

 */

@property (nonatomic)NSInteger          horizontalCount;

/**

 *  開始构造出作为mask用的view

 */

- (void)buildMaskView;

/**

 *  渐变动画的时间

 */

@property (nonatomic)NSTimeInterval     fadeDuradtion;

/**

 *  两个动画之间的时间间隔

 */

@property (nonatomic)NSTimeInterval     animationGapDuration;

/**

 *  開始隐藏动画

 *

 *  @param animated 是否运行动画

 */

- (void)fadeAnimated:(BOOL)animated;

/**

 *  開始显示动画

 *

 *  @param animated 时候运行动画

 */

- (void)showAnimated:(BOOL)animated;

@end

#import "TranformFadeView.h"

#define  STATR_TAG  0x19871220

@interface TranformFadeView ()

/**

 *  图片

 */

@property (nonatomic,strong)UIImageView    *imageView;

/**

 *  全部的maskView

 */

@property (nonatomic,strong)UIView         *allMaskView;

/**

 *  maskView的个数

 */

@property (nonatomic)       NSInteger       maskViewCount;

/**

 *  存储maskView的编号

 */

@property (nonatomic,strong)NSMutableArray *countArray;

@end

@implementation TranformFadeView

/**

 *  初始化并加入图片

 *

 *  @param frame frame值

 */

- (void)initImageViewWithFrame:(CGRect)frame {

    self.imageView                     = [[UIImageViewalloc] initWithFrame:frame];

    self.imageView.layer.masksToBounds = YES;

    [selfaddSubview:self.imageView];

}

- (instancetype)initWithFrame:(CGRect)frame {

    if (self = [superinitWithFrame:frame]) {

        [selfinitImageViewWithFrame:self.bounds];

    }

    return self;

}

- (void)buildMaskView {

    /**

     *  假设没有,就返回空

     */

    if (self.horizontalCount <1 ||self.verticalCount <1) {

        return;

    }

    // 承载全部的maskView

    self.allMaskView = [[UIViewalloc] initWithFrame:self.bounds];

    self.maskView    =self.allMaskView;

    // 计算出每一个view的尺寸

    CGFloat height         = self.frame.size.height;

    CGFloat width          = self.frame.size.width;

    CGFloat maskViewHeight = self.verticalCount   <= 1 ? height : (height /self.verticalCount);

    CGFloat maskViewWidth  = self.horizontalCount <= 1 ? width  : (width  /self.horizontalCount);

    // 用以计数

    int count = 0;

    //先水平循环,再垂直循环

    for (int horizontal =0; horizontal <self.horizontalCount; horizontal++) {

        for (int vertical =0; vertical <self.verticalCount; vertical++) {

            CGRect frame = CGRectMake(maskViewWidth  * horizontal,

                                      maskViewHeight * vertical,

                                      maskViewWidth,

                                      maskViewHeight);

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

            maskView.frame           = frame;

            maskView.tag             =STATR_TAG + count;

            maskView.backgroundColor = [UIColorblackColor];

            [self.allMaskViewaddSubview:maskView];

            count++;

        }

    }

    self.maskViewCount = count;

    // 存储

    self.countArray    = [NSMutableArrayarray];

    for (int i =0; i <self.maskViewCount; i++) {

        [self.countArrayaddObject:@(i)];

    }

}

/**

 *  策略模式一

 *

 *  @param inputNumber 输入

 *

 *  @return 输出

 */

- (NSInteger)strategyNormal:(NSInteger)inputNumber {

    NSNumber *number = self.countArray[inputNumber];

    return number.integerValue;

}

- (void)fadeAnimated:(BOOL)animated {

    if (animated == YES) {

        for (int i =0; i <self.maskViewCount; i++) {

            UIView *tmpView = [selfmaskViewWithTag:[selfstrategyNormal:i]];

            [UIViewanimateWithDuration:(self.fadeDuradtion <=0.f ?

1.f :self.fadeDuradtion)

                                 delay:i * (self.animationGapDuration <=0.f ?

0.2f :self.animationGapDuration)

                               options:UIViewAnimationOptionCurveLinear

                            animations:^{

                                tmpView.alpha =0.f;

                            }completion:^(BOOL finished) {

                            }];

        }

    }else {

        for (int i =0; i <self.maskViewCount; i++) {

            UIView *tmpView = [selfmaskViewWithTag:i];

            tmpView.alpha   =0.f;

        }

    }

}

- (void)showAnimated:(BOOL)animated {

    if (animated == YES) {

        for (int i =0; i <self.maskViewCount; i++) {

            UIView *tmpView = [selfmaskViewWithTag:[selfstrategyNormal:i]];

            [UIViewanimateWithDuration:(self.fadeDuradtion <=0.f ?1.f :self.fadeDuradtion)

                                 delay:i * (self.animationGapDuration <=0.f ?

0.2f :self.animationGapDuration)

                               options:UIViewAnimationOptionCurveLinear

                            animations:^{

                                tmpView.alpha =1.f;

                            }completion:^(BOOL finished) {

                            }];

        }

    }else {

        for (int i =0; i <self.maskViewCount; i++) {

            UIView *tmpView = [selfmaskViewWithTag:i];

            tmpView.alpha   =1.f;

        }

    }

}

/**

 *  依据tag值获取maskView

 *

 *  @param tag maskView的tag值

 *

 *  @return tag值相应的maskView

 */

- (UIView *)maskViewWithTag:(NSInteger)tag {

    return [self.maskViewviewWithTag:tag +STATR_TAG];

}

/* 重写setter,getter方法 */

@synthesize contentMode =_contentMode;

- (void)setContentMode:(UIViewContentMode)contentMode {

    _contentMode               = contentMode;

    self.imageView.contentMode = contentMode;

}

- (UIViewContentMode)contentMode {

    return_contentMode;

}

@synthesize image = _image;

- (void)setImage:(UIImage *)image {

    _image               = image;

    self.imageView.image = image;

}

- (UIImage *)image {

    return _image;

}

@end

调用：

#import "ViewController.h"

#import "TranformFadeView.h"

typedefenum : NSUInteger {

    TYPE_ONE,

    TYPE_TWO,

} EType;

@interface ViewController ()

@property (nonatomic,strong)TranformFadeView *tranformFadeViewOne;

@property (nonatomic,strong)TranformFadeView *tranformFadeViewTwo;

@property (nonatomic,strong)NSTimer          *timer;

@property (nonatomic)        EType             type;

@end

@implementation ViewController

- (void)viewDidLoad {

    [superviewDidLoad];

    self.view.backgroundColor = [UIColorblackColor];

    // 图片1

    self.tranformFadeViewOne                 = [[TranformFadeViewalloc] initWithFrame:self.view.bounds];

    self.tranformFadeViewOne.contentMode     = UIViewContentModeScaleAspectFill;

    self.tranformFadeViewOne.image           = [UIImageimageNamed:@"1"];

    self.tranformFadeViewOne.verticalCount   =2;

    self.tranformFadeViewOne.horizontalCount =12;

    self.tranformFadeViewOne.center          =self.view.center;

    [self.tranformFadeViewOnebuildMaskView];

    self.tranformFadeViewOne.fadeDuradtion        =1.f;

    self.tranformFadeViewOne.animationGapDuration =0.1f;

    [self.viewaddSubview:self.tranformFadeViewOne];

    // 图片2

    self.tranformFadeViewTwo                 = [[TranformFadeViewalloc] initWithFrame:self.view.bounds];

    self.tranformFadeViewTwo.contentMode     = UIViewContentModeScaleAspectFill;

    self.tranformFadeViewTwo.image           = [UIImageimageNamed:@"2"];

    self.tranformFadeViewTwo.verticalCount   =2;

    self.tranformFadeViewTwo.horizontalCount =12;

    self.tranformFadeViewTwo.center          =self.view.center;

    [self.tranformFadeViewTwobuildMaskView];

    self.tranformFadeViewTwo.fadeDuradtion        =1.f;

    self.tranformFadeViewTwo.animationGapDuration =0.1f;

    [self.viewaddSubview:self.tranformFadeViewTwo];

    [self.tranformFadeViewTwofadeAnimated:YES];

    // 定时器

    self.timer = [NSTimerscheduledTimerWithTimeInterval:6

                                                 target:self

                                               selector:@selector(timerEvent)

                                               userInfo:nil

                                                repeats:YES];

    self.type  =TYPE_ONE;

}

- (void)timerEvent {

    if (self.type ==TYPE_ONE) {

        self.type =TYPE_TWO;

        [self.viewsendSubviewToBack:self.tranformFadeViewTwo];

        [self.tranformFadeViewTwoshowAnimated:NO];

        [self.tranformFadeViewOnefadeAnimated:YES];

    }else {

        self.type =TYPE_ONE;

        [self.viewsendSubviewToBack:self.tranformFadeViewOne];

        [self.tranformFadeViewOneshowAnimated:NO];

        [self.tranformFadeViewTwofadeAnimated:YES];

    }

}

@end