使用 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图片原理类似,是一种逐帧动 ...
随机推荐
- Spring-02 Java配置实现IOC
Java配置 Spring4推荐使用java配置实现IOC Spring boot也推荐采用java配置实现IOC 在实际项目中,一般采用注解配置业务bean,全局配置使用Java配置. Java配置 ...
- 项目中常用的js方法（持续更新）
<script> var utils = { //时间戳转日期(timestamp:时间戳 默认当前时间) dateFormat: function(timestamp = new Dat ...
- sleep 和wait的差别
基本的差别 1.sleep 是Thread 类的方法,wait 是Object类中定义的方法 2.sleep()方法可以在任何地方使用 3.wait()方法只能在synchronized方法中使用,或 ...
- 错误的语法:"create view必须是批处理中仅有的语句"
编写脚本提示: 错误的语法:"create view必须是批处理中仅有的语句" FROM sys.views WHERE name = 'v_CS_UserRoleNames' ) ...
- Android UI: LinearLayout中layout_weight 属性的使用规则
首先来查看android sdk文档,有这么一段话 LinearLayout also supports assigning a weight to individual children with ...
- [JOYOI] 1096 数字组合
题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的是 ...
- 5. 在Datadir目录外创建单独表空间
5. 在Datadir目录外创建单独表空间 要在MySQL dadadir之外的位置创建单独表空间,请使用该子句: DATA DIRECTORY = '/path' 在目标目录中,MySQL会创建一个 ...
- python str.format 中文对齐的细节问题
写了一个练手的爬虫...在输出的时候出现了让人很不愉♂悦的问题 像这样: 令人十分难受啊! #----------------------------------------------------- ...
- 【HDU 6008】Worried School（模拟）
Problem Description You may already know that how the World Finals slots are distributed in EC sub-r ...
- list、tuple、dict内部功能释义
一.list内部功能释义 运用频次:☆☆☆☆☆ 1. append():列表末尾插入元素 [示例] >>> L1=[11,22,33] >>> L1.append( ...