iOS (仿印物App)TableView給力動畫的簡單實現

判若兩人丶發表於2016-08-22
iOSAPPView動畫

前言：

之前看見的印物App裡的定製模組的TableView效果還是不錯的，所以仿這個App實現了最主要的亮點之一TableView 滾動效果(層疊效果)。cell中的細節功能是沒有新增的, 需要的話大家可以自己進行擴充套件新增!

效果圖：

功能實現:

首先TableView與cell的初始化過程就不多解釋了, 接下來我們來看看重要的程式碼實現:

首先實現cell中的方法

需要用到2個屬性來幫助我們實現這個方法

  //底層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下面位置進行三次處理(設定初始值), 如下程式碼:

//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呼叫就非常簡單了:

#pragma mark -
- (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偏移:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
  // [_tableView visibleCells]：獲取表檢視的可見單元格。(可見的檢視)
  //遍歷
  [[_tableView visibleCells] enumerateObjectsUsingBlock:^(LREffectCell * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
      //cell偏移設定
      [obj cellOffsetOnTabelView:_tableView];
  }];
}複製程式碼

效果圖失幀嚴重建議去GitHub - 點選下載 執行效果會更明顯， 如果喜歡的小夥伴請點一個贊吧，歡迎留言補充與給出不足之處！ 原文閱讀

相關文章