使用 maskView 设计动画
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
使用 maskView 设计动画的更多相关文章
- 纯css3开发的响应式设计动画菜单（支持ie8）
这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式 ...
- Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard
上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程. 而Silverlight动画分类两种类型,From/T ...
- Silverlight & Blend动画设计系列五：故事板(StoryBoards)和动画(Animations)
正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Blend下能够设计出很多满意的动画作品,或许他具体是怎么实现的,通过什么方式实现的我们还是一无所知.本篇将续前面几篇基础动画之上,详细 ...
- Silverlight & Blend动画设计系列一：偏移动画（TranslateTransform）
用户界面组件.图像元素和多媒体功能可以让我们的界面生动活泼,除此之外,Silverlight还具备动画功能,它可以让应用程序“动起来”.实际上,英文中Animation这个单词的意思是给某物带来生命. ...
- Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard http://silverlightchina.net/html/tips/2010/0329/934.html
Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard 时间:2010-03-29 11:13来源:SilverlightChina.Net 作者:jv9 点击: ...
- 零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计
原文:零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计 本章将教大家如何把Photoshop档案置入Expression Blend ...
- [转]Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard
上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程. 而Silverlight动画分类两种类型,From/T ...
- iOS CoreAnimation详解(一) 有关Layer的动画
以前由于项目需要 也写了一些动画 ,但是知识不系统,很散.这段时间趁着项目完成的空袭,来跟着大神的脚步系统的总结一下iOS中Core Animation的知识点. 原博客地址:http://blog. ...
- Android Animation（动画）
前言 Android 平台提供实现动画的解决方案(三种) 一.3.0以前,android支持两种动画: (1)Frame Animation:顺序播放事先做好的图像,与gif图片原理类似,是一种逐帧动 ...
随机推荐
- PHP22 PHP在线支付
易宝支付示例脚本 参考网址:https://blog.csdn.net/yerenyuan_pku/article/details/52239862 参数说明 p1_MerId:商户编号,网站在易宝上 ...
- process data
# version 1.0def connect_mysql(sql, oper_type="select", data_l=None): conn = pymysql.conne ...
- 执行BarTender
1.配置.btw模板 1.1.左侧创建“具名数据源” 1.2.条码属性,选择刚才的数据源 1.3.保存 2.配置.btin服务 2.1.点击 工具/Integration Builder” 2.2.创 ...
- 乘法逆元-洛谷-P3811
题目背景 这是一道模板题 题目描述 给定n,p求1~n中所有整数在模p意义下的乘法逆元. 输入输出格式 输入格式: 一行n,p 输出格式: n行,第i行表示i在模p意义下的逆元. 输入输出样例 输入样 ...
- linux php安装ODBC扩展
进入php源码安装目录的ext/pdo_odbc $ sudo /data/apps/php/bin/phpize $ ./configure --with-php-config=/data/apps ...
- Python-接口自动化（十一）
配置文件的作用(十一) (十二)配置文件 1.python当中有一个模块可以读取配置文件里面的信息:configparser,对这个模块进行导入之后就可以使用了,import configparser ...
- AI学习笔记（01）
[1]在Ai中,每个对象有两个属性:填充颜色和描边颜色. [2]在AI中,非要选中,才操作.而PS中,选中图层即可. [3]AI中,都是路径. [4]选择工具是选中整个路径,而直接选择工具 ...
- 大数据学习——linux系统的网卡配置步骤
ifconfig 查看ip,没有ip时需要配置 配置步骤: 1输入命令setup,选择network configuration,选择runtool,选择device configuration,选择 ...
- xtu DP Training B. Collecting Bugs
B. Collecting Bugs Time Limit: 10000ms Memory Limit: 64000KB 64-bit integer IO format: %lld Jav ...
- zoj 2829 Beautiful Number
Beautiful Number Time Limit: 2 Seconds Memory Limit: 65536 KB Mike is very lucky, as he has two ...