iOS-几行代码实现登录页Fade效果的图片轮播

关于图片轮播器的思路，大部分人会直接想到collectionView或者scrollView使用极大数设置contentSize的思路，这种方式很适合需要pageEnable效果的轮播器。但是如果单纯的支持登录页的话，我今天分享一种新的思路去实现Fade轮播效果：只使用UIImageView！效果如下

fade_demo.gif

接下来几行代码，带你飞 😯😯😯

首先我们准备自己的UIImageView以及NSTimer和图片索引值currentCount,当然图片数组也少不了：

@property(nonatomic,strong) NSArray *imageArr;
@property(nonatomic,assign) NSInteger currentCount;
@property(nonatomic,strong) NSTimer *timer;

图片数组懒加载

-(NSArray *)imageArr{
    if (!_imageArr) {
        NSMutableArray *tempArr = [[NSMutableArray alloc] init];
        for (int i = 1 ; i < 5; i ++) {
            UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",i]];
            [tempArr addObject:image];
        }
        _imageArr = [tempArr copy];
    }
    return _imageArr;
}

初始化cycleView及NSTimer(轮播必不可少)，这里必须插一句NSRunloopMode的选择：

• NSRunLoopCommonModes 不受UI操作影响
• NSDefaultRunLoopMode default状态才会再去执行

-(void)testForCATransition{

    self.currentCount = 2;//因为我们初始化第一张图片，所以索引从2开始
    
    self.cycleView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    [self.view addSubview:_cycleView];
    self.cycleView.contentMode = UIViewContentModeScaleAspectFit;
    self.cycleView.image = [UIImage imageNamed:@"1"];
    
    NSTimer *timer = [NSTimer timerWithTimeInterval:4.0f target:self selector:@selector(changeImage) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
    self.timer = timer;
    
}

看一下changeImage的操作

-(void)changeImage{
    NSInteger currentPage = self.currentCount%4;
    if (!currentPage) {
        currentPage = 4;
        self.currentCount -= 4;
    }// 此处处理当余数等于0找不到图片的情况
    NSLog(@"%@",[NSThread currentThread]);
    [self.cycleView.layer removeAllAnimations];
    self.cycleView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld",currentPage]];
    [self.cycleView.layer addAnimation:self.pushTrans forKey:@"transition"];// 给layer加动画，pushTrans请看下面代码块
    self.currentCount ++;
}

好了，几行核心代码,使用懒加载，这个私有变量记得去声明里补上@property(nonatomic,strong) CATransition *pushTrans;

-(CATransition *)pushTrans{
    if (!_pushTrans) {
        _pushTrans = [CATransition animation];
        _pushTrans.type = kCATransitionFade;//核心就是这个宏
        _pushTrans.duration = 3.0f;//时间的设置需要与NSTimer有差，不然效果生硬
    }
    return _pushTrans;
}

那么你从ViewDidLoad里调用我们的testForCATransition方法便实现了我们预期的效果

当前控制器销毁时 务必停止timer且置为nil

[self.timer invalidate];
    self.timer = nil;