1.maskView(maskLayer) 基本原理 ：可类比于多张png图片叠加遮罩
2.maskView配合CAGradientLayer，alpha通道图片的使用.maskView是iOS8以上才有，如果要考虑兼容低版本，用maskLayer替换
3.设计方本横向渐变消失的控件
一、两张png图片叠加遮罩
- (void)addMaskView
{
CGFloat width = 120;
//
使用maskView的情况
UIImageView *addImageView= [[UIImageView
alloc] initWithFrame:CGRectMake(20,
20 , width, width)];
[self.view addSubView: addImageView];
addImageView.image = [UIImage
imageNamed:@"base"];
UIImageView *mask = [[UIImageView
alloc] initWithFrame:CGRectMake(0,
0, width, width)];
mask.image = [UIImage
imageNamed:@"mask"];
// maskView并不能用addSubview来添加遮罩,这点千万注意
addImageView.maskView = mask;
}
二、maskView 配合 CAGradientLayer 的使用
1.用CAGradientLayer直接产生带透明像素通道的layer
2.用maskView直接加载带CAGradientLayer的view
3.可以通过对CAGradientLayer进行动画的操作实现动画效果
- (void)addGradientLayer {
//
加载图片
UIImageView *imageView = [[UIImageView
alloc] initWithFrame:CGRectMake(20,
20, 200,
200)];
imageView.image = [UIImage
imageNamed:@"base"];
[self.view
addSubview:imageView];
//
创建出CAGradientLayer，
//可以对gradientLayer的frame,colors.locations.startPoint,endPoint进行动画效果
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;
}];
}
三、设计文本横向渐变消失的控件
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 = [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;
}];
}
- (void)fadeRightWithDuration:(NSTimeInterval)druation animaited:(BOOL)animated
{
if (animated) {
[UIView
animateWithDuration: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 {
[super
viewDidLoad];
self.view.backgroundColor = [UIColor
blackColor];
//
创建FadeString
FadeString *fadeString = [[FadeString
alloc] initWithFrame:CGRectMake(0,
0, 300,
40)];
fadeString.text =
@"hello world";
fadeString.center =
self.view.center;
[self.view
addSubview:fadeString];
//
执行动画效果
[fadeString
fadeRight];
}
二、切换图片
@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 = [[UIImageView
alloc] initWithFrame:frame];
self.imageView.layer.masksToBounds
= YES;
[self
addSubview:self.imageView];
}
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super
initWithFrame:frame]) {
[self
initImageViewWithFrame:self.bounds];
}
return
self;
}
- (void)buildMaskView {
/**
* 如果没有,就返回空
*/
if (self.horizontalCount <
1 ||
self.verticalCount <
1) {
return;
}
//
承载所有的maskView
self.allMaskView = [[UIView
alloc] 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 = [[UIView
alloc] initWithFrame:frame];
maskView.frame = frame;
maskView.tag =
STATR_TAG + count;
maskView.backgroundColor = [UIColor
blackColor];
[self.allMaskView
addSubview:maskView];
count++;
}
}
self.maskViewCount = count;
//
存储
self.countArray = [NSMutableArray
array];
for (int i =
0; i < self.maskViewCount; i++) {
[self.countArray
addObject:@(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 = [self
maskViewWithTag:[self
strategyNormal:i]];
[UIView
animateWithDuration:(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 = [self
maskViewWithTag:i];
tmpView.alpha =
0.f;
}
}
}
- (void)showAnimated:(BOOL)animated {
if (animated == YES) {
for (int i =
0; i < self.maskViewCount; i++) {
UIView *tmpView = [self
maskViewWithTag:[self
strategyNormal:i]];
[UIView
animateWithDuration:(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 = [self
maskViewWithTag:i];
tmpView.alpha =
1.f;
}
}
}
/**
* 根据tag值获取maskView
*
* @param tag maskView的tag值
*
* @return tag值对应的maskView
*/
- (UIView *)maskViewWithTag:(NSInteger)tag {
return [self.maskView
viewWithTag: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"
typedef
enum : 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 {
[super
viewDidLoad];
self.view.backgroundColor = [UIColor
blackColor];
//
图片1
self.tranformFadeViewOne = [[TranformFadeView
alloc]
initWithFrame:self.view.bounds];
self.tranformFadeViewOne.contentMode
= UIViewContentModeScaleAspectFill;
self.tranformFadeViewOne.image = [UIImage
imageNamed:@"1"];
self.tranformFadeViewOne.verticalCount =
2;
self.tranformFadeViewOne.horizontalCount =
12;
self.tranformFadeViewOne.center =
self.view.center;
[self.tranformFadeViewOne
buildMaskView];
self.tranformFadeViewOne.fadeDuradtion =
1.f;
self.tranformFadeViewOne.animationGapDuration =
0.1f;
[self.view
addSubview:self.tranformFadeViewOne];
//
图片2
self.tranformFadeViewTwo = [[TranformFadeView
alloc]
initWithFrame:self.view.bounds];
self.tranformFadeViewTwo.contentMode
= UIViewContentModeScaleAspectFill;
self.tranformFadeViewTwo.image = [UIImage
imageNamed:@"2"];
self.tranformFadeViewTwo.verticalCount =
2;
self.tranformFadeViewTwo.horizontalCount =
12;
self.tranformFadeViewTwo.center =
self.view.center;
[self.tranformFadeViewTwo
buildMaskView];
self.tranformFadeViewTwo.fadeDuradtion =
1.f;
self.tranformFadeViewTwo.animationGapDuration =
0.1f;
[self.view
addSubview:self.tranformFadeViewTwo];
[self.tranformFadeViewTwo
fadeAnimated:YES];
//
定时器
self.timer = [NSTimer
scheduledTimerWithTimeInterval: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.view
sendSubviewToBack:self.tranformFadeViewTwo];
[self.tranformFadeViewTwo
showAnimated:NO];
[self.tranformFadeViewOne
fadeAnimated:YES];
}
else {
self.type =
TYPE_ONE;
[self.view
sendSubviewToBack:self.tranformFadeViewOne];
[self.tranformFadeViewOne
showAnimated:NO];
[self.tranformFadeViewTwo
fadeAnimated:YES];
}
}
@end
版权声明：本文为博主原创文章，未经博主允许不得转载。