使用 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图片原理类似,是一种逐帧动 ...
随机推荐
- Win10任务栏搜索框无法搜索,显示白色页面
如果确定: Windows search服务启动打开 %LocalAppData%\Packages\windows.immersivecontrolpanel_cw5n1h2txyewy\Local ...
- 《编译原理》画 DAG 图与求优化后的 4 元式代码- 例题解析
<编译原理>画 DAG 图与求优化后的 4 元式代码- 例题解析 DAG 图(Directed Acylic Graph)无环路有向图 (一)基本块 基本块是指程序中一顺序执行的语句序列, ...
- [JOYOI] 1061 Mobile Service
题目限制 时间限制 内存限制 评测方式 题目来源 1000ms 131072KiB 标准比较器 Local 题目描述 一个公司有三个移动服务员.如果某个地方有一个请求,某个员工必须赶到那个地方去(那个 ...
- 为公司架构一套高质量的 Vue UI 组件库
有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到. 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂 ...
- POJ 1949 Chores(DAG上的最长路 ， DP)
题意: 给定n项任务, 每项任务的完成用时t和完成每项任务前需要的k项任务, 求把所有任务完成的最短时间,有当前时间多项任务都可完成, 那么可以同时进行. 分析: 这题关键就是每项任务都会有先决条件, ...
- 【07】QQ群管理公告小结：
[07]QQ群管理公告小结: 01,请看公告遵守相关规定. 02,群内除QQ自带的缺省表情外(不是QQ的VIP或大图表情),禁止发送大表情,大图片(展示问题的屏幕截图除外), 03,修改群名片 ...
- Python编译错误总结
1.TypeError: object() takes no parameters 如果你出现了这个报错,请检查你的__init__函数名或者其定义有没有写错.一般是把__init__写成了__int ...
- INFO main org.springframework.context.support.AbstractApplicationContext
原因, spring-framework-5.0.2.RELEASE 需要使用 jdk8.
- HDU 5469 Antonidas
Antonidas Time Limit: 4000ms Memory Limit: 65536KB This problem will be judged on HDU. Original ID: ...
- zoj 1240
IBM Minus One Time Limit: 2 Seconds Memory Limit: 65536 KB You may have heard of the book '2001 ...