图片碎片化mask动画

效果

源码

////  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 
    
     @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.