图片碎片化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:@"1"],
                    [UIImage imageNamed:@"2"],
                    [UIImage imageNamed:@"3"],
                    [UIImage imageNamed:@"4"],
                    [UIImage imageNamed:@"5"]];
    
    // 图片1
    self.tranformFadeViewOne                 = [[TranformFadeView alloc] initWithFrame:self.view.bounds];
    self.tranformFadeViewOne.contentMode     = UIViewContentModeScaleAspectFill;
    self.tranformFadeViewOne.image           = [self currentImage];
    self.tranformFadeViewOne.verticalCount   = 2;
    self.tranformFadeViewOne.horizontalCount = 12;
    self.tranformFadeViewOne.center          = self.view.center;
    [self.tranformFadeViewOne buildMaskView];
    
    self.tranformFadeViewOne.fadeDuradtion        = 1.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   = 2;
    self.tranformFadeViewTwo.horizontalCount = 12;
    self.tranformFadeViewTwo.center          = self.view.center;
    [self.tranformFadeViewTwo buildMaskView];
    
    self.tranformFadeViewTwo.fadeDuradtion        = 1.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:6];
    [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 < 1 || self.verticalCount < 1) {
        
        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   <= 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         = [[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 = 0; 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 = 0; i < self.maskViewCount; i++) {
            
            UIView *tmpView = [self maskViewWithTag:[self strategyNormal:i]];
            [UIView animateWithDuration:(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 = [self maskViewWithTag:i];
            tmpView.alpha   = 0.f;
        }
    }
}

- (void)showAnimated:(BOOL)animated {
    
    if (animated == YES) {
        
        for (int i = 0; i < self.maskViewCount; i++) {
            
            UIView *tmpView = [self maskViewWithTag:[self strategyNormal:i]];
            
            [UIView animateWithDuration:(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 = [self maskViewWithTag:i];
            tmpView.alpha   = 1.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.