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

- 效果图 (失帧严重)
![](http://upload-images.jianshu.io/upload_images/1429890-f2c857700f043939.gif?imageMogr2/auto-orient/strip)

- ###补录一张好一点的效果图
![效果图.gif](http://upload-images.jianshu.io/upload_images/1429890-160c57b488c1c694.gif?imageMogr2/auto-orient/strip)

>- ####主要原理:
- ######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,通过属性就可以取出这两个控件,更方便
- ![](http://upload-images.jianshu.io/upload_images/1429890-0ef9eecbc92ec46d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ![辅助图](http://upload-images.jianshu.io/upload_images/1429890-e96b574a45622974.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
***

- ###代码区域

```
// 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
}
}
}```

MG--滚动的视觉差效果的更多相关文章

  1. 原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果(scroll()、offsetTop、滚动监听的妙用)

    想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更 ...

  2. 视觉差效果 - jqyery scrollTop原理

    原理是用页面的滚动高度scrollTop()来控制背景图的位置 附上源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  3. css实现视觉差的滚动

    之前在逛知乎的时候,发现知乎app首页中偶尔掺杂的广告图片,都是做的视觉差的效果,广告图片的向上速度明显比外面页面的上拉速度慢了很多,看起来很炫酷,然后在网上看了下,发现有很多js插件可以实现这种效果 ...

  4. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  5. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  6. [转]用 jQuery 实现页面滚动(Scroll)效果的完美方法

    转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...

  7. 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

    1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...

  8. weui实现滚动加载的效果

    weui是微信公司提供的一个UI框架,在H5开发中一些组件可以直接使用.weui文档地址:http://www.jqweui.cn/components 使用weui,需要引入weui.css和jqu ...

  9. 视觉差双排listview效果

    https://github.com/bavariama1/ListBuddies

随机推荐

  1. Bash脚本15分钟进阶指导

    首先声明这是网上摘来的.这里的技术技巧最初是来自谷歌的“Testing on the Toilet” (TOTT).这里是一个修订和扩增版本. 脚本安全 我的所有bash脚本都以下面几句为开场白: # ...

  2. @Resource、@Autowired、@Qualifier的注解注入及区别

    在Java代码中可以使用 @Resource  或者 @Autowired 注解方式来进行注入. 虽然 @Resource 和 @Autowried 都可以完成依赖注入,但是他们是有区别的. 一: @ ...

  3. {HDU}{2516}{取石子游戏}{斐波那契博弈}

    题意:给定一堆石子,每个人最多取前一个人取石子数的2被,最少取一个,最后取石子的为赢家,求赢家. 思路:斐波那契博弈,这个题的证明过程太精彩了! 一个重要的定理:任何正整数都可以表示为若干个不连续的斐 ...

  4. php 文件锁

    当写为LOCK_EX锁 且 读为LOCK_SH锁时最为妥当,经测试,这时情况如下: 1, 先运行w.php,马上支行r.php 后 程序会先等写入后再读取 2, 先运行r.php,再马上支行w.php ...

  5. [整理]FPGA学习资料汇总

    01.特权同学倾情奉献海量FPGA学习资料 http://pan.baidu.com/s/1pJIb32F

  6. Sql Server中不常用的表运算符之APPLY(2)

    在Sql Server中不常用的表运算符之APPLY(1)中提到,SQL2005中新支持的APPLY的特性:1.可以直接将表表达式(表值函数或者子查询)作为APPLY语句的右表连接左表.2.由于使用A ...

  7. myBatis,Spring,SpringMVC三大框架ssm整合模板

    整合步骤 创建web工程 导入整合所需的所有jar包 编写各层需要的配置文件 1) mybatis的全局配置文件 <configuration>    <!-- 批量别名的设置 -- ...

  8. Spring+springmvc+Mybatis整合案例 xml配置版(myeclipse)详细版

    Spring+springmvc+Mybatis整合案例 Version:xml版(myeclipse) 文档结构图: 从底层开始做起: 01.配置web.xml文件 <?xml version ...

  9. Python scipy.sparse矩阵使用方法

    本文以csr_matrix为例来说明sparse矩阵的使用方法,其他类型的sparse矩阵可以参考https://docs.scipy.org/doc/scipy/reference/sparse.h ...

  10. hdu5452 Minimum Cut

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5452 题意:给你一个图和它的生成树,要你在树上删一条边,问你最少删多少条边使得图不联通(开始时图一定联 ...