图片碎片化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.
