iOS 图片碎片化轮播

在项目中，常常用到轮播图，我们常常会想到用UIScrollView来实现。但是还有很多较高大上的方法，效果也更加炫酷。比如下面将要说的碎片化轮播。

效果类似现实中广告牌的翻转效果，如图

        

实际上是两层view在交替显示，所以先要一个TranformFadeView类，实现翻转的翻转碎片化的效果，翻转时间，碎片宽度的等..

TranformFadeView.h

#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

#import "TranformFadeView.h"

typedef enum : NSUInteger {
    
    kSubViewTag = 0x1000,
    
} ETranformFadeViewValue;

@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             = kSubViewTag + 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 + kSubViewTag];
}

#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

   控制其中，用定时器设定5张图片的交替轮播，采用两层TranformFadeView

#import "ViewController.h"
#import "TranformFadeView.h"

typedef enum : NSUInteger {
    
    kTypeOne,
    kTypeTwo,
    
} EType;
@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIView *contentView;
@property (nonatomic, strong) TranformFadeView *tranformFadeViewOne;
@property (nonatomic, strong) TranformFadeView *tranformFadeViewTwo;
@property (nonatomic,strong)NSTimer *timer;
@property (nonatomic)         EType     type;

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

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.images = @[[UIImage imageNamed:@"banner5"],
                    [UIImage imageNamed:@"banner1"],
                    [UIImage imageNamed:@"banner2"],
                    [UIImage imageNamed:@"banner3"],
                    [UIImage imageNamed:@"banner4"]];
    
    // 图片1
    self.tranformFadeViewOne                      = [[TranformFadeView alloc] initWithFrame:self.contentView.bounds];
    self.tranformFadeViewOne.contentMode          = UIViewContentModeScaleAspectFill;
    self.tranformFadeViewOne.image                = [self currentImage];
    self.tranformFadeViewOne.verticalCount        = 3;
    self.tranformFadeViewOne.horizontalCount      = 20;
    self.tranformFadeViewOne.center               = self.contentView.center;
    self.tranformFadeViewOne.fadeDuradtion        = 1.f;
    self.tranformFadeViewOne.animationGapDuration = 0.075f;
    [self.tranformFadeViewOne buildMaskView];
    [self.contentView addSubview:self.tranformFadeViewOne];
    
    // 图片2
    self.tranformFadeViewTwo                      = [[TranformFadeView alloc] initWithFrame:self.contentView.bounds];
    self.tranformFadeViewTwo.contentMode          = UIViewContentModeScaleAspectFill;
    self.tranformFadeViewTwo.image                = [self currentImage];
    self.tranformFadeViewTwo.verticalCount        = 3;
    self.tranformFadeViewTwo.horizontalCount      = 30;
    self.tranformFadeViewTwo.center               = self.contentView.center;
    self.tranformFadeViewTwo.fadeDuradtion        = 1.f;
    self.tranformFadeViewTwo.animationGapDuration = 0.075f;
    [self.tranformFadeViewTwo buildMaskView];
    [self.contentView addSubview:self.tranformFadeViewTwo];
    [self.tranformFadeViewTwo fadeAnimated:NO];
    
    self.timer = [NSTimer timerWithTimeInterval:4 target:self selector:@selector(timerAction) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSDefaultRunLoopMode];
}

- (void)timerAction
{
    NSLog(@"adsf");
    if (self.type == kTypeOne) {
        
        self.type = kTypeTwo;
        
        [self.contentView sendSubviewToBack:self.tranformFadeViewTwo];
        self.tranformFadeViewTwo.image = [self currentImage];
        [self.tranformFadeViewTwo showAnimated:NO];
        [self.tranformFadeViewOne fadeAnimated:YES];
        
        
    } else {
        
        self.type = kTypeOne;
        
        [self.contentView sendSubviewToBack:self.tranformFadeViewOne];
        self.tranformFadeViewOne.image = [self currentImage];
        [self.tranformFadeViewOne showAnimated:NO];
        [self.tranformFadeViewTwo fadeAnimated:YES];
    }

}
- (UIImage *)currentImage {
    
    self.count = ++self.count % self.images.count;
    return self.images[self.count];
}

@end