图片碎片化mask动画

图片碎片化mask动画

效果

源码

https://github.com/YouXianMing/Animations

//
//  TransformFadeViewController.m
//  Animations
//
//  Created by YouXianMing on 15/11/17.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import "TransformFadeViewController.h"
#import "TranformFadeView.h"
#import "GCD.h"

typedef enum : NSUInteger {

    TYPE_ONE,
    TYPE_TWO,

} EType;

@interface TransformFadeViewController ()

@property (nonatomic, strong) TranformFadeView *tranformFadeViewOne;
@property (nonatomic, strong) TranformFadeView *tranformFadeViewTwo;

@property (nonatomic, strong) GCDTimer *timer;
@property (nonatomic)         EType     type;

@property (nonatomic, strong) NSArray   *images;
@property (nonatomic)         NSInteger  count;

@end

@implementation TransformFadeViewController

- (void)viewDidLoad {

    [super viewDidLoad];
}

- (void)setup {

    [super setup];

    self.images = @[[UIImage imageNamed:@""],
                    [UIImage imageNamed:@""],
                    [UIImage imageNamed:@""],
                    [UIImage imageNamed:@""],
                    [UIImage imageNamed:@""]];

    // 图片1
    self.tranformFadeViewOne                 = [[TranformFadeView alloc] initWithFrame:self.view.bounds];
    self.tranformFadeViewOne.contentMode     = UIViewContentModeScaleAspectFill;
    self.tranformFadeViewOne.image           = [self currentImage];
    self.tranformFadeViewOne.verticalCount   = ;
    self.tranformFadeViewOne.horizontalCount = ;
    self.tranformFadeViewOne.center          = self.view.center;
    [self.tranformFadeViewOne buildMaskView];

    self.tranformFadeViewOne.fadeDuradtion        = .f;
    self.tranformFadeViewOne.animationGapDuration = 0.1f;

    [self.view addSubview:self.tranformFadeViewOne];

    // 图片2
    self.tranformFadeViewTwo                 = [[TranformFadeView alloc] initWithFrame:self.view.bounds];
    self.tranformFadeViewTwo.contentMode     = UIViewContentModeScaleAspectFill;
    self.tranformFadeViewTwo.verticalCount   = ;
    self.tranformFadeViewTwo.horizontalCount = ;
    self.tranformFadeViewTwo.center          = self.view.center;
    [self.tranformFadeViewTwo buildMaskView];

    self.tranformFadeViewTwo.fadeDuradtion        = .f;
    self.tranformFadeViewTwo.animationGapDuration = 0.1f;

    [self.view addSubview:self.tranformFadeViewTwo];
    [self.tranformFadeViewTwo fadeAnimated:YES];

    // timer
    self.timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
    [self.timer event:^{

        if (self.type == TYPE_ONE) {

            self.type = TYPE_TWO;

            [self.view sendSubviewToBack:self.tranformFadeViewTwo];
            self.tranformFadeViewTwo.image = [self currentImage];
            [self.tranformFadeViewTwo showAnimated:NO];
            [self.tranformFadeViewOne fadeAnimated:YES];

        } else {

            self.type = TYPE_ONE;

            [self.view sendSubviewToBack:self.tranformFadeViewOne];
            self.tranformFadeViewOne.image = [self currentImage];
            [self.tranformFadeViewOne showAnimated:NO];
            [self.tranformFadeViewTwo fadeAnimated:YES];
        }

    } timeIntervalWithSecs:];
    [self.timer start];
}

- (UIImage *)currentImage {

    self.count = ++self.count % self.images.count;

    return self.images[self.count];
}

@end

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

#pragma mark - 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

细节

使用的时候动态切换图片就可以了，实际上只需要创建出2个view.