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

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

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

一、两张png图片叠加遮罩

- (void)addMaskView

{

CGFloat width = ;

//
使用maskView的情况

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

[self.view addSubView: addImageView];

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

UIImageView *mask       = [[UIImageViewalloc] initWithFrame:CGRectMake(,, 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(,,
, )];

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(,);//设置方向

gradientLayer.endPoint         =CGPointMake(,);

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

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

[containerView.layeraddSublayer:gradientLayer];

//
设定maskView

imageView.maskView  = containerView;

CGRect frame        = containerView.frame;

frame.origin.x     -=;

//
又一次赋值

containerView.frame = frame;

//
给maskView做动画效果

[UIViewanimateWithDuration:3.fanimations:^{

// 改变位移

CGRect frame        = containerView.frame;

frame.origin.x     +=;

// 又一次赋值

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.,);

gradientLayer.,);

//
创建并接管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(,,
, )];

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 {

/**

*  假设没有,就返回空

*/

||
) {

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   <= ? height : (height /
self.verticalCount);

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

//
用以计数

;

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

; horizontal <
self.horizontalCount; horizontal++) {

; 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];

; 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) {

; 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 {

; i <
self.maskViewCount; i++) {

UIView *tmpView = [selfmaskViewWithTag:i];

tmpView.alpha   =0.f;

}

}

}

- (void)showAnimated:(BOOL)animated {

if (animated ==
YES) {

; 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 {

; 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.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.center          =self.view.center;

[self.tranformFadeViewTwobuildMaskView];

self.tranformFadeViewTwo.fadeDuradtion        =1.f;

self.tranformFadeViewTwo.animationGapDuration =0.1f;

[self.viewaddSubview:self.tranformFadeViewTwo];

[self.tranformFadeViewTwofadeAnimated:YES];

//
定时器

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