使用 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图片原理类似,是一种逐帧动 ...
随机推荐
- C++位域和内存对齐问题
1. 位域: 1. 在C中,位域可以写成这样(注:位域的数据类型一律用无符号的,纪律性). struct bitmap { unsigned a : ; unsigned b : ; unsigned ...
- 数论基础之组合数&计数问题
一.组合数:问题引入:现在有 n 个球,取其中的 k 个球,问一共有多少种方式?答案: 公式直观解释:我们考虑有顺序地取出 k 个球:第一次有 n 种选择,第二次有 n-1 种选择,...,第 k 次 ...
- Django生成二维码
1. 安装 pip install qrcode 安装Image包 pip install Image 1.1 在代码中使用 import qrcode img = qrcode.make('输入一个 ...
- ubuntu修改网卡名称ensX为eth0
1.sudo nano /etc/default/grub 找到GRUB_CMDLINE_LINUX="" 改为GRUB_CMDLINE_LINUX="net.ifnam ...
- python 06 8/28-8/30
六 函数的返回值,使用return返回数据,可以同时返回多个数据,将会以元组的形式返回到函数的调用处.return 具有返回数据和中止程序的作用! return 后不加任何数据则返回None ,判定为 ...
- c++_核桃的数量
#include <iostream> using namespace std; int gcd(int x,int y){ int temp; ){ temp=x%y; x=y; y=t ...
- svn基本使用详情
1.增加(Add)先提到变更列表中,再commit到配置库中,选择新增文件,右键SVN菜单执行“Add“操作提交到”变更列表中”,然后右键SVN菜单执行”SVNCommit”提交到版本库中. 2.删除 ...
- day22 02 面向对象的交互
day22 02 面向对象的交互 一.三种编程方式 1.面向过程编程:核心是过程,流水线式思维 优点:极大降低了写程序的复杂程度,只需要顺着要执行的步骤,堆叠代码即可 缺点:一套流水线或者流程就用来解 ...
- python基础002
1.pycharm安装与添加解释器 专业版.英文界面,不要汉化—一定要尊重知识产权 算术运算符:+ - * / // % ** ^ 布尔运算符:== > < >= <= 逻辑运 ...
- 关于在Safari浏览器中将网页添加到主屏幕的相关设置（自定义图标，启动动画，自定义名称）
在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上,让我们的web页面看起来像native那样 第一步: 第二步: 第三步: 到这里还没结束:我们还要进行相关设置才能使我们的应用更像原生 ...