[控件] TranformFadeView

TranformFadeView

效果图:

源码地址:

https://github.com/YouXianMing/UI-Component-Collection

注意:

maskView是iOS8中新出的,用以简化alpha遮罩的操作,与layer的mask是一回事,想要修改兼容的,请考虑使用layer的mask来满足你的需求.

特点:

* 方块的个数可以自己设定

* 你可以实现你自己的策略来设定渐变消失的方式

核心源码:

//
//  TranformFadeView.h
//  TransformationFadeView
//
//  Created by XianMingYou on 15/4/16.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import <UIKit/UIKit.h>

@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

//
//  TranformFadeView.m
//  TransformationFadeView
//
//  Created by XianMingYou on 15/4/16.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#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                     = [[UIImageView alloc] initWithFrame:frame];
    self.imageView.layer.masksToBounds = YES;
    [self addSubview:self.imageView];
}

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self initImageViewWithFrame:self.bounds];
    }

    return self;
}

- (void)buildMaskView {

    /**
     *  如果没有,就返回空
     */
    if (self.horizontalCount <  || self.verticalCount < ) {
        return;
    }

    // 承载所有的maskView
    self.allMaskView = [[UIView alloc] 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);

    // 用以计数
    int count = ;

    // 先水平循环,再垂直循环
    for (int horizontal = ; horizontal < self.horizontalCount; horizontal++) {

        for (int vertical = ; vertical < self.verticalCount; vertical++) {

            CGRect frame = CGRectMake(maskViewWidth  * horizontal,
                                      maskViewHeight * vertical,
                                      maskViewWidth,
                                      maskViewHeight);

            UIView *maskView         = [[UIView alloc] initWithFrame:frame];
            maskView.frame           = frame;
            maskView.tag             = STATR_TAG + count;
            maskView.backgroundColor = [UIColor blackColor];

            [self.allMaskView addSubview:maskView];

            count++;
        }

    }

    self.maskViewCount = count;

    // 存储
    self.countArray    = [NSMutableArray array];
    for (int i = ; i < self.maskViewCount; i++) {
        [self.countArray addObject:@(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 = ; i < self.maskViewCount; i++) {
            UIView *tmpView = [self maskViewWithTag:[self strategyNormal:i]];

            [UIView animateWithDuration:(self.fadeDuradtion <= .f ? .f : self.fadeDuradtion)
                                  delay:i * (self.animationGapDuration <= .f ? 0.2f : self.animationGapDuration)
                                options:UIViewAnimationOptionCurveLinear
                             animations:^{
                                 tmpView.alpha = .f;
                             } completion:^(BOOL finished) {

                             }];
        }

    } else {

        for (int i = ; i < self.maskViewCount; i++) {
            UIView *tmpView = [self maskViewWithTag:i];
            tmpView.alpha   = .f;
        }

    }
}

- (void)showAnimated:(BOOL)animated {
    if (animated == YES) {

        for (int i = ; i < self.maskViewCount; i++) {
            UIView *tmpView = [self maskViewWithTag:[self strategyNormal:i]];

            [UIView animateWithDuration:(self.fadeDuradtion <= .f ? .f : self.fadeDuradtion)
                                  delay:i * (self.animationGapDuration <= .f ? 0.2f : self.animationGapDuration)
                                options:UIViewAnimationOptionCurveLinear
                             animations:^{
                                 tmpView.alpha = .f;
                             } completion:^(BOOL finished) {

                             }];
        }

    } else {

        for (int i = ; i < self.maskViewCount; i++) {
            UIView *tmpView = [self maskViewWithTag:i];
            tmpView.alpha   = .f;
        }

    }

}

/**
 *  根据tag值获取maskView
 *
 *  @param tag maskView的tag值
 *
 *  @return tag值对应的maskView
 */
- (UIView *)maskViewWithTag:(NSInteger)tag {
    return [self.maskView viewWithTag: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

需要注意的细节: