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

前言：

以前看見的印物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 - 點擊下載 運行效果會更明顯， 若是喜歡的小夥伴請點一個贊吧，歡迎留言補充與給出不足之處！ 原文閱讀