美文网首页iOS动画效果iOS精选博文iOS精选博文
iOS~用UICollectionView实现酷炫的推拉效果

iOS~用UICollectionView实现酷炫的推拉效果

作者: 爱上别的吧 | 来源:发表于2016-08-05 17:42 被阅读2483次
推拉.gif
之前在某款APP中看到了这种照片浏览效果,惊艳之余也用心思考并实现了出来,现在特地拿出来分享给大家。

1.思路

看到这种效果的时候,首先�猜测是用UICollectionView实现的,但是正常的UICollectionView的每个Cell都是首尾相连的,现在却是每个Cell都在上一个Cell的正下方,因此我猜测是在滑动的时候将下一个Cell插入到正在滑动的Cell的下方并随着Y轴方向的偏移量而移动。

2.实现

核心代码:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

  if (scrollView.contentOffset.y < 0) {//顶部第一个cell下拉不产生效果
    
     return;
  }
  //获取到当前cell
  int offset = scrollView.contentOffset.y / [UIScreen mainScreen].bounds.size.height ;
  NSIndexPath *index = [NSIndexPath indexPathForItem:offset inSection:0];
  UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:index];

  //获取到下一个cell
  NSIndexPath *nextIndex = [NSIndexPath indexPathForItem:offset + 1 inSection:0];
  UICollectionViewCell *nextCell = [self.collectionView cellForItemAtIndexPath:nextIndex];

  //将下一个cell插入到当前cell的下方并随着Y轴方向的偏移量而移动
  CGRect rect = nextCell.frame;
  rect.origin.y = scrollView.contentOffset.y;
  nextCell.frame = rect;

  [self.collectionView insertSubview:nextCell belowSubview:cell];

  //下拉设置透明度
  if (scrollView.contentOffset.y < self.offsetY) {
    
      CGFloat progress = (self.offsetY - scrollView.contentOffset.y) / [UIScreen mainScreen].bounds.size.height;
      cell.alpha = progress;

      self.currentCell = nil;
      self.currentCell = cell;
    
  }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

  [self adjustCurrentCell:scrollView];//暂时修复底部间隙BUG,待修改,还望大家指导

  self.offsetY = scrollView.contentOffset.y;
  self.currentCell.alpha = 1.0;
}

- (void)adjustCurrentCell:(UIScrollView *)scrollView {

  //获取到当前cell
  NSInteger offset = scrollView.contentOffset.y / [UIScreen mainScreen].bounds.size.height ;
  NSIndexPath *index = [NSIndexPath indexPathForItem:offset inSection:0];
  UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:index];

  CGRect rect = cell.frame;
  rect.origin.y = self.collectionView.contentOffset.y;
  cell.frame = rect;
}

3.源码

初步效果就这样了,具体使用就仁者见仁、智者见智了。源码放在gitHub上,欢迎大家指正,记得�star哦!

相关文章

网友评论

  • CMD独白:第一次下拉走一遍到最后一张图,是没问题的,第二次再下拉从第一张到第二张图片的时候,第二张图片显示的是第三张图片
  • AWeiLoveAndroid:我发现效果和我这个是一样的https://www.jianshu.com/p/d3065bbc1167 :joy:
    爱上别的吧:@AWeiLoveAndroid :clap::+1::+1:厉害了安卓的也有了
  • 4125cab572e6:厉害!
  • e45274b12c72:屌爆了
  • 漫山MASH:滑动幅度大的话会抖
  • ff6250868c5d:不知为何底部会有一条白边~博主你看看DEMO
    爱上别的吧:@sandouchan 暂时修复了 但是还是有点瑕疵,我以后再研究研究,如果您有好方法还望告知 :smile:
    爱上别的吧:@sandouchan 嗯 好的 谢谢
  • 音吹:将下一个cell插入到当前cell的下方并随着Y轴方向的偏移量而移动,这个为什么下一个cell的y不随着你滑动而改变呢?这里不太明白,求大神解答
    爱上别的吧:@音吹 nextCell一直在换啊 它并不是某一个固定的Cell
    音吹:@爱上别的吧 nextCell的y是一直在变得, 为什么实现的效果是nextCell的y变小了一个屏幕的高度后就不变了呢,我问的可能太低端了...
    爱上别的吧:@音吹 这里将CollectionView在Y轴的偏移量赋值给nextCell,因此nextCell会始终位于屏幕中心
  • 4f66bb24b4f7:给力哩考。。
  • Mg明明就是你:上啦效果呢
    爱上别的吧:@Mg明明就是你 见demo源码

本文标题:iOS~用UICollectionView实现酷炫的推拉效果

本文链接:https://www.haomeiwen.com/subject/bqohsttx.html