MG--滚动的视觉差效果

几句代码完成tableView滚动的视觉差

• 效果图 （失帧严重）

  
  

• 补录一张好一点的效果图

效果图.gif

• 主要原理：

• 1、设置UI。简单说一下，就是先往tableViewCell添加一个UIView，这个view的尺寸大小等于cell或者说等于cell.contentView；然后在往这个View添加一个UIImageView，这个imageView的约束是左右为0，水平居中，然后设置它的高度比cell大（具体数值可以根据图片的实际大小调整）因为超出父控件大小会不显示，这边设置的是400的大小。

• 2、就是在UITableViewDelegate的代理方法func scrollViewDidScroll(_ scrollView: UIScrollView)方法中动态修改imageView.origin.y的值，造成一种错觉是图片滚动的视觉差。其次，要补充说明的是：我们要对cell进行处理的是出现在屏幕上的cell，并不是所有的cell，于是我们通过self.tableView.visibleCells获取所有出现屏幕上的cell，for循环遍历通过cell取出即可imageView的父视图，通过它的判断frame.origin.y通过处理，然后再将值赋值给imageView.frame.origin.y即可实现最终效果

---

• 说明：这是在StoryBoard做的，所以在SB给view和imageView分别绑定了一个tag，以便取这两个控件，当然也可以自定义cell，然后在自定义cell中脱线出来，则不需要绑定tag，通过属性就可以取出这两个控件，更方便
  • 
  • 

    辅助图

---

• 代码区域

//  ViewController.swift
//  MGTableView
import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    // 数据源
    fileprivate lazy var dataArr: [UIImage] = {
        var arr: [UIImage] = [UIImage]()
        for _ in 1...10 {
            for i in 1...10 {
                let image = UIImage(named: String(format: "%02d", i))
                arr.append(image!)
            }
        }
        return arr
    }()
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.layoutMargins = UIEdgeInsets.zero
        tableView.separatorInset = UIEdgeInsets.zero
        tableView.separatorStyle = .none
        tableView.rowHeight = 300
    }
}

// MARK: - UITableViewDataSource
extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataArr.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cellID", for: indexPath)
        let imageV = cell.viewWithTag(1000) as! UIImageView
        imageV.image = dataArr[indexPath.row]
        return cell
    }
}

// MARK: - UITableViewDelegate
extension ViewController: UITableViewDelegate{
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        for cell in self.tableView.visibleCells {
            // 取出imageView和imageView的父视图
            let imageVParentV = cell.viewWithTag(1001)
            let imageV = cell.viewWithTag(1000)
            let rect = imageVParentV?.convert((imageVParentV?.bounds)!, to: nil)
//            var y = UIScreen.main.bounds.size.height - (rect?.origin.y)! - 560
            var y = -(rect?.origin.y)!
            y *= 0.2
            // 判断imageView的父视图的frame.origin.y
            if y>0 {
                y=0
            }
            if y < -200 {
                y = -200
            }
            // 重新赋值 imageView.frame.origin.y
            imageV?.frame.origin.y = y
        }
    }
}

---

---

---

• github

项目	简介
MGDS_Swif	逗视视频直播
MGMiaoBo	喵播视频直播
MGDYZB	斗鱼视频直播
MGDemo	n多小功能合集
MGBaisi	高度仿写百思
MGSinaWeibo	高度仿写Sina
MGLoveFreshBeen	一款电商App
MGWeChat	小部分实现微信功能
MGTrasitionPractice	自定义转场练习
DBFMDemo	豆瓣电台
MGPlayer	一个播放视频的Demo
MGCollectionView	环形图片排布以及花瓣形排布
MGPuBuLiuDemo	瀑布流--商品展
MGSlideViewDemo	一个简单点的侧滑效果，仿QQ侧滑
MyResume	一个展示自己个人简历的Demo
GoodBookDemo	好书

• 1、直播喵播MGMiaoBo下载

Snip20161026_15.png

Snip20161026_16.png

Snip20161026_35.png

• 2、逗视：逗你玩的直播App，可下载试玩

• 看下效果

逗视介绍1.gif

逗视介绍2.gif

---