所謂的視覺差就是TableView在滾動的時候，可見的Cell都處于滑動狀態(tài)，但是偏移量各不同，從而達到的一種視覺效果。

效果圖

由于上傳圖片有大小要求，所以質(zhì)量會有點問題！

OK，如何完成的？

恩，原理就這樣子
默認(rèn)顯示的時候

默認(rèn)顯示

<br />
向下滑動的時候

向下滑動

<br />
向上滑動的時候

向上滑動

通過上面三個圖就知道，要在滾動TableView的時候計算圖片的Y值，來達到移動的效果。

計算代碼以及注釋

- (void)cellOnTableView:(UITableView *)tableView didScrollView:(UIView *)view{
    
    //將cell的frame轉(zhuǎn)換成View的Frame
    CGRect rect = [tableView convertRect:self.frame toView:view];
    
    //視圖的Frame的一半 減去 所看到的每個Cell的Y（獲取滾動的值）
    //以屏幕中心為0 獲取能看到每個cell離中心點的值
    float distanceCenter = CGRectGetHeight(view.frame)*0.5 - CGRectGetMinY(rect);
    
    
    //圖片的高度 - cell的高度 = 圖片超出cell的高度部分
    float difference = CGRectGetHeight(self.backImage.frame) - CGRectGetHeight(self.frame);
    
    
    float imageMove = (distanceCenter / CGRectGetHeight(view.frame)) * difference;
    
    //舊的圖片F(xiàn)rame
    CGRect imageRect = self.backImage.frame;
    
    //計算新的Y值
    imageRect.origin.y = imageMove - (difference *0.5);
    
    //賦值
    self.backImage.frame = imageRect;
    
}

<br />
調(diào)用

//滾動監(jiān)聽
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 獲取表視圖的可見單元格。(可見的視圖)
    NSArray *visibleCells = [self.tableview visibleCells];
    
    for (Cell *cell in visibleCells) {
        //可見視圖設(shè)置->背景圖片y值
        [cell cellOnTableView:self.tableview didScrollView:self.view];
    }
    
}

<br />
然后到這里就可以運行跑起來看效果了，嗯，確實實現(xiàn)了效果，但是先看下內(nèi)存吧。

下面的圖片均運行在真機上

<br />

直接加載的情況下

80+M貌似沒多大問題，并且我這里選的也是比較大的圖片，這里只加載了10張圖片，但是如果圖片過多，第一次滑動會卡，不流暢。

于是考慮優(yōu)化內(nèi)存，先奉上優(yōu)化后的，當(dāng)然我這里只是做一個思路，當(dāng)然會有更好的解決方案，如果您有更好的解決方案，麻煩留言告知。

優(yōu)化后

在上面的情況下都是10張圖片，但是內(nèi)存消耗卻少了很多，少了80M左右，這個優(yōu)化還是值得去做的。

因為數(shù)據(jù)源加載的是圖片，又因為數(shù)據(jù)源是強引用，常駐內(nèi)存，所以從圖片入手。
在手機上顯示圖片，完全不用顯示原尺寸，所以我的解決思路就是壓縮圖片，同時在界面上又基本上看不出來區(qū)別。
OK，現(xiàn)在要做的就是壓縮圖片。

<br />
做法就是根據(jù)屏幕的高度，然后在用圖片的寬高比去壓縮。

+(UIImage * _Nullable)imageCompressForWidth:(UIImage * _Nonnull)sourceImage targetWidth:(CGFloat)defineWidth{
    //根據(jù)原圖片計算值壓縮后的尺寸
    CGSize imageSize = sourceImage.size;
    CGFloat bili = imageSize.width / imageSize.height;
    CGFloat width = defineWidth * 2;
    CGFloat height = width * bili;
    
    //開啟繪圖
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(width, height), 1, 1);
    
    //繪圖到當(dāng)前上下文
    [sourceImage drawInRect:CGRectMake(0, 0, width, height)];
    
    //獲取新圖片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    //關(guān)閉圖片繪制
    UIGraphicsEndImageContext();
    
    //返回圖片
    return newImage;
}

如果你對圖片繪制不是很熟悉
這里有一個傳送門

由于圖片過大，所以Demo打包為ZIP文件 ，如果對您有一點幫助，麻煩star一下，Thanks