图片碎片化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.
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
