iOS 泡芙轮播图线性渐变效果

一、前言

前阵子下载了一个泡芙app效果,于是看上了这么好的效果后,自己动手实现, 具体实现逻辑,我用代码粘贴演示:

二、实现逻辑

我这边的图片高度暂时为后台返回的,如果你要实现的话不妨自定义几个随机高度,代码如下:

图片的高度比例公式:  (屏幕宽 *  后台返回图片高 /  后台返回图片宽 )

这边需要用到几个数组,首先初始化他们

//定义数组
    NSMutableArray *_imageHeightArray;//存放图片的高度 一一对应
    NSMutableArray *_itemArr; //存放ImageView对象

 //初始化
    _imageHeightArray  = [NSMutableArray array];
    _itemArr = [NSMutableArray array];

    //1.取出默认第一张的图片高度
    NSDictionary *dic = imageArr[0];
    CGFloat oneHeight = ScreenWidth * [ dic[@"height"] floatValue] / [ dic[@"width"] floatValue];
    UIScrollView *scroView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, oneHeight)];
    for (int i = 0 ; i < imagStringArr.count; i++) {
        //2.取出其他图片的高度并且赋值给imageView
        NSDictionary *otherDic = imageArr[i];
        CGFloat otherHeight = ScreenWidth * [ otherDic[@"height"] floatValue] / [ otherDic[@"width"] floatValue];
        UIImageView *imageV = [[UIImageView alloc]initWithFrame:CGRectMake(ScreenWidth *i, 0, ScreenWidth, otherHeight)];
        //3.这边给图片设置填充
        imageV.contentMode = UIViewContentModeScaleToFill;
        //4.加载图片
        [imageV sd_setImageWithURL:[NSURL URLWithString:imagStringArr[i]]];
        [scroView addSubview:imageV];
        //5.存放图片的高度 一一对应
        [_imageHeightArray addObject:@(otherHeight)];
        //6.存放ImageView对象
        [_itemArr addObject:imageV];
    }
    //7.设置一些常用属性
    scroView.delegate = self;
    scroView.bounces= false;
    scroView.pagingEnabled = YES;
    scroView.showsHorizontalScrollIndicator = NO;
    //8.滚动大小设置
    scroView.contentSize = CGSizeMake(ScreenWidth *imagStringArr.count, 0);
    self.scrollview = scroView;
    //9.添加到头部
    self.tableView.tableHeaderView = scroView;

以上代码这一块只是对scrollView的图片设置,以及contentSize,以及一些数组的缓存;接下去就是实现的主要代码了:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
         //头部轮播图效果
         [self smallToBigAction];
}

具体也是在smallToBigAction方法实现,根据偏移量计算,滚动的时候 要算 是否是大图滚到小图,或者小图滚到大图,代码里面都做了注释,我就不多做解释了,小编也是经过各种bug修复后,成功实现这个效果:

-(void)smallToBigAction
{
    CGFloat scrollviewW =  self.scrollview.frame.size.width;
    CGFloat x = self.scrollview.contentOffset.x;
    int page = x /  scrollviewW;
    int nowPage = page;
    //下一页
    int nextPage = page+1;
    //下一页所需要展示的高度
    if (nextPage>=_imageHeightArray.count) {
        return;
    }
    UIImageView *next = _itemArr[nextPage];
    //每次滚动获取当前和下一页的高度
    float nowH = [_imageHeightArray[nowPage] floatValue];
    float nextH = [_imageHeightArray[nextPage] floatValue];
    if (nowH < nextH) {//从小到大
        //计算比例
        float offx = (nextH-nowH)/scrollviewW;
        //当前屏幕滚动的实际偏移量
        CGFloat actualOffset = x-(nowPage*scrollviewW);
        CGRect frame = _scrollview.frame;
        frame.size.height = (nowH)+(actualOffset*offx);
        if (actualOffset!=0) {
            //过滤重新赋值scrollView的高
            _scrollview.frame = frame;
            UIImageView *currentImageView = _itemArr[nowPage];
            currentImageView.frame = CGRectMake(currentImageView.frame.origin.x, currentImageView.frame.origin.y, _scrollview.frame.size.width, _scrollview.frame.size.height);
        }
    }else
    {
        //从大到大
        //计算比例
        float offx = (nowH-nextH)/scrollviewW;
        //当前屏幕滚动的实际偏移量
        CGFloat actualOffset = x-(nowPage*scrollviewW);
        CGRect frame = _scrollview.frame;
        frame.size.height = (nowH)-(actualOffset*offx);
        if (actualOffset!=0) {
             //过滤重新赋值scrollView的高
            _scrollview.frame = frame;
            //设置当前imageView的frame
            UIImageView * currentImageView = _itemArr[nowPage];
            currentImageView.frame = CGRectMake(currentImageView.frame.origin.x, currentImageView.frame.origin.y, _scrollview.frame.size.width, _scrollview.frame.size.height);
           //设置下一张imageView的height 和frame
            CGRect nextFrame= next.frame;
            nextFrame.size.height = frame.size.height;
            next.frame = nextFrame;
        }
    }
    //最后刷新表~
    [self.tableView reloadData];
    
}

最终效果图

QQ20180614-103134.gif