使用 maskView 设计动画

Posted gavanwanggw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 maskView 设计动画相关的知识,希望对你有一定的参考价值。

1.maskView(maskLayer) 基本原理 :可类比于多张png图片叠加遮罩

2.maskView配合CAGradientLayeralpha通道图片的使用.maskViewios8以上才有,假设要考虑兼容低版本号,用maskLayer替换

3.设计方本横向渐变消失的控件


一、两张png图片叠加遮罩

- (void)addMaskView

{

    CGFloat width = 120;

    // 使用maskView的情况

    UIImageView *addImageView= [[UIImageViewalloc] initWithFrame:CGRectMake(20,20 , width, width)];

    [self.view addSubView: addImageView];

    addImageView.image      = [UIImageimageNamed:@"base"];

    UIImageView *mask       = [[UIImageViewalloc] initWithFrame:CGRectMake(0,0, width, width)];

    mask.image              = [UIImageimageNamed:@"mask"];

    // maskView并不能用addSubview来加入遮罩,这点千万注意

    addImageView.maskView   = mask;

}


二、maskView 配合 CAGradientLayer 的使用

1.CAGradientLayer直接产生带透明像素通道的layer

2.maskView直接载入带CAGradientLayerview

3.能够通过对CAGradientLayer进行动画的操作实现动画效果


- (void)addGradientLayer {

    // 载入图片

    UIImageView *imageView = [[UIImageViewalloc] initWithFrame:CGRectMake(20,20, 200, 200)];

    imageView.image        = [UIImageimageNamed:@"base"];

    [self.viewaddSubview:imageView];

    // 创建出CAGradientLayer

    //能够对gradientLayerframe,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(0,0);//设置方向

    gradientLayer.endPoint         =CGPointMake(1,0);

    

    // 容器view --> 用于载入创建出的CAGradientLayer

    UIView *containerView = [[UIViewalloc] initWithFrame:imageView.bounds];

    [containerView.layeraddSublayer:gradientLayer];

    // 设定maskView

    imageView.maskView  = containerView;

    CGRect frame        = containerView.frame;

    frame.origin.x     -=200;

    // 又一次赋值

    containerView.frame = frame;

    // maskView做动画效果

    [UIViewanimateWithDuration:3.fanimations:^{

        // 改变位移

        CGRect frame        = containerView.frame;

        frame.origin.x     +=400;

        

        // 又一次赋值

        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.startPoint       =CGPointMake(0,0);

    gradientLayer.endPoint         =CGPointMake(1,0);

    

    // 创建并接管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(0,0, 300, 40)];

    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 {

    

    /**

     *  假设没有,就返回空

     */

    if (self.horizontalCount <1 || self.verticalCount <1) {

        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   <= 1 ? height : (height / self.verticalCount);

    CGFloat maskViewWidth  = self.horizontalCount <= 1 ? width  : (width  / self.horizontalCount);

    

    

    // 用以计数

    int count = 0;

    

    

    //先水平循环,再垂直循环

    for (int horizontal =0; horizontal < self.horizontalCount; horizontal++) {

        

        

        for (int vertical =0; 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];

    for (int i =0; 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) {

        

        for (int i =0; 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 {

        

        

        for (int i =0; i < self.maskViewCount; i++) {

            UIView *tmpView = [selfmaskViewWithTag:i];

            tmpView.alpha   =0.f;

        }

        

        

    }

}


- (void)showAnimated:(BOOL)animated {

    if (animated == YES) {

        

        for (int i =0; 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 {

        

        

        for (int i =0; i < self.maskViewCount; i++) {

            UIView *tmpView = [selfmaskViewWithTag:i];

            tmpView.alpha   =1.f;

        }

        

        

    }

    

}


/**

 *  依据tag值获取maskView

 *

 *  @param tag maskViewtag

 *

 *  @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.verticalCount   =2;

    self.tranformFadeViewOne.horizontalCount =12;

    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.verticalCount   =2;

    self.tranformFadeViewTwo.horizontalCount =12;

    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];

    

    

    

    // 定时器

    self.timer = [NSTimerscheduledTimerWithTimeInterval:6

                                                 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 设计动画的主要内容,如果未能解决你的问题,请参考以下文章

动画设计属性

Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)

36个优秀的APP界面动画设计(GIF动画欣赏)

Silverlight & Blend动画设计系列三:缩放动画(ScaleTransform)

使用 SliverAppBar 设计这个动画

APP设计中的交互动画是怎么实现的?