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

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

二、实现逻辑 【iOS|iOS 泡芙轮播图线性渐变效果】我这边的图片高度暂时为后台返回的,如果你要实现的话不妨自定义几个随机高度,代码如下:

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

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

//定义数组 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]; }