使用 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图片原理类似,是一种逐帧动 ...
随机推荐
- JetBrains系列产品激活
注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址: http://idea.codebeta.cn https://s.tuzhi ...
- PHP18 PHP与AJAX
学习要点 JavaScript实现Ajax jQuery实现Ajax JSON PHP的JSON函数 JavaScript处理JSON数据 JavaScript实现Ajax 什么是Ajax 搜狗地图 ...
- Mac 下用homebrew安装配置MongoDB
---恢复内容开始--- 1.首先安装homebrew,已有就跳过 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent. ...
- 删除mysql中user为空用户，mysql空密码
进入mysql数据库 mysql -uroot -p 查看用户信息 select user,host ,Password from mysql.user; 如下图: 删除user为空用户 delete ...
- 【Java IO流】浅谈io，bio，nio，aio
本文转载自:http://www.cnblogs.com/doit8791/p/4951591.html 1.同步异步.阻塞非阻塞概念 同步和异步是针对应用程序和内核的交互而言的. 阻塞 ...
- Python 和 Flask实现RESTful services
使用Flask建立web services超级简单. 当然,也有很多Flask extensions可以帮助建立RESTful services,但是这个例实在太简单了,不需要使用任何扩展. 这个we ...
- iOS-runtime-objc_setAssociatedObject（关联对象以及传值）
例子: static const char kRepresentedObject; - (IBAction)doSomething:(id)sender { UIAlertView *alert = ...
- [HDU2157]How many ways??（DP + 矩阵优化）
传送门 k < 20 k这么小,随便dp一下就好了... dp[i][j][k]表示从i到j经过k个点的方案数 4重循环.. 但是如果k很大就不好弄了 把给定的图转为邻接矩阵,即A(i,j)=1 ...
- 洛谷P4219 - [BJOI2014]大融合
Portal Description 初始有\(n(n\leq10^5)\)个孤立的点,进行\(Q(Q\leq10^5)\)次操作: 连接边\((u,v)\),保证\(u,v\)不连通. 询问有多少条 ...
- bzoj 2721[Violet 5]樱花 数论
[Violet 5]樱花 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 671 Solved: 395[Submit][Status][Discuss ...