黑马程序员技术交流社区

标题: iOS (仿印物App)TableView给力动画的简单实现(二) [打印本页]

---

作者: Simpon    时间: 2016-10-20 11:20
标题: iOS (仿印物App)TableView给力动画的简单实现(二)


原文出处：http://www.jianshu.com/p/94e33148459d



前言：

之前看见的印物App里的定制模块的TableView效果还是不错的，所以仿这个App实现了最主要的亮点之一TableView滚动效果(层叠效果)。cell中的细节功能是没有添加的, 需要的话大家可以自己进行扩展添加!

效果图：
效果图.gif

功能实现:首先TableView与cell的初始化过程就不多解释了, 接下来我们来看看重要的代码实现:

• 首先实现cell中的方法   需要用到2个属性来帮助我们实现这个方法
  
  [Objective-C] 纯文本查看 复制代码

  //底层View
  
  @property (nonatomic, weak)UIView *backGView;
  
  //上层Image
  
  @property (nonatomic, weak)UIImageView *backGImage;
  
  
  
  //这个方法是我们主要实现的核心代码
  
  /**  cell偏移设置*/      
  
  - (void)cellOffsetOnTabelView:(UITableView *)tabelView;

    思路:
    1.需要规定一个固定的currentLocation值
    2.如果cell的Y值小于tabelView.contentOffset.y值(超出        屏幕上面的位置), 需要进行一次处理(停止cell偏移)
    3.如果cell的Y值在currentLocation范围内需要进行二次处理(进行cell偏移)
    4.最后cell的Y值在currentLocation下面位置进行三次处理(设置初始值), 如下代码:
    
  [Objective-C] 纯文本查看 复制代码

  //cell偏移量实现  - (void)cellOffsetOnTabelView:(UITableView *)tabelView
  
    {
  
    CGFloat currentLocation = tabelView.contentOffset.y +         LRLastCellHeight; 
  
    //如果需要可以打开下面这段代码
  
    #if 0
  
    //下拉禁止 第一个cell往下移动
  
    if (currentLocation < LRCellHeight) return;
  
    #endif        
  
    //如果超出规定的位置以 ->“上”
  
    if (self.frame.origin.y < tabelView.contentOffset.y +       LRLastCellHeight - LRCellHeight) {
  
  
  
    self.backGView.height = LRLastCellHeight;
  
  
  
    self.backGView.y = - (LRLastCellHeight - LRCellHeight);
  
  
  
    }else if (self.frame.origin.y <= currentLocation && self.frame.origin.y >= tabelView.contentOffset.y) {//cell开始进入规定的位置
  
  
  
    //通过绝对值 取出移动的Y值
  
    CGFloat moveY = ABS(self.frame.origin.y - currentLocation) / LRCellHeight * (LRLastCellHeight - LRCellHeight);
  
  
  
    //每次进来把当前cell提到最上层
  
    [self.superview bringSubviewToFront:self];
  
  
  
    //移动的值 + cell固定高度
  
    self.backGView.height = LRCellHeight + moveY;
  
  
  
    //设置偏移量Y值
  
    self.backGView.y = - moveY;
  
  
  
    }else{//超出规定的位置以 ->“下”
  
    self.backGView.height = LRCellHeight;
  
    self.backGView.y = 0;
  
          }
  
    }

• 调用方法主要核心代码实现完, 其他部分在ViewController调用就非常简单了:
  
  [Objective-C] 纯文本查看 复制代码

  #pragma mark -<UITableViewDataSource>
  
  - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
  
  {
  
      return 10;
  
  }
  
  
  
  - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  
  {
  
      LREffectCell * effectCell = [LREffectCell cellFromTableView:tableView];
  
  
  
      return effectCell;
  
  }
  
  
  
  - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
  
  {
  
      //cell 将要显示时候我们把数据给它
  
      LREffectCell * effectCell = (LREffectCell *)cell;
  
  
  
      effectCell.backGImage.image = LRGetImage(indexPath.row);
  
  
  
      //初始化 -> 调用第一次滚动
  
      [effectCell cellOffsetOnTabelView:_tableView];
  
  }
  
  
  
  - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
  
  {
  
      return LRCellHeight;
  
  }

  最后需要监听scrollView滚动实现cell偏移:
  
  [Objective-C] 纯文本查看 复制代码

  - (void)scrollViewDidScroll:(UIScrollView *)scrollView
  
  {
  
      // [_tableView visibleCells]：获取表视图的可见单元格。(可见的视图)
  
      //遍历
  
      [[_tableView visibleCells] enumerateObjectsUsingBlock:^(LREffectCell * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
  
          //cell偏移设置
  
          [obj cellOffsetOnTabelView:_tableView];
  
      }];
  
  }

  
  

效果图失帧严重建议去GitHub - 点击下载 运行效果会更明显，包你满意！
如果喜欢的小伙伴请点一个赞吧，欢迎留言补充与给出不足之处！

精华推荐:

黑马程序员：为苹果与iOS开发者的前景正名

与君共勉 --- 记黑马22期同学成长经验。

【持续更新】2016年最全最新的iOS视频+软件+源码+面试/技术

关于iOS 10最新的课程视频及demo第三弹，火速发布了

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2