标签：
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;
}
- (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
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：
原文地址：http://blog.csdn.net/baitxaps/article/details/46867883
