MG--滚动的视觉差效果
#几句代码完成tableView滚动的视觉差
- 效果图 (失帧严重)

- ###补录一张好一点的效果图

>- ####主要原理:
- ######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
}
}
}```
MG--滚动的视觉差效果的更多相关文章
- 原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果(scroll()、offsetTop、滚动监听的妙用)
想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更 ...
- 视觉差效果 - jqyery scrollTop原理
原理是用页面的滚动高度scrollTop()来控制背景图的位置 附上源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- css实现视觉差的滚动
之前在逛知乎的时候,发现知乎app首页中偶尔掺杂的广告图片,都是做的视觉差的效果,广告图片的向上速度明显比外面页面的上拉速度慢了很多,看起来很炫酷,然后在网上看了下,发现有很多js插件可以实现这种效果 ...
- 基于html5页面滚动背景图片动画效果
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="fullpage&q ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- [转]用 jQuery 实现页面滚动(Scroll)效果的完美方法
转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...
- 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...
- weui实现滚动加载的效果
weui是微信公司提供的一个UI框架,在H5开发中一些组件可以直接使用.weui文档地址:http://www.jqweui.cn/components 使用weui,需要引入weui.css和jqu ...
- 视觉差双排listview效果
https://github.com/bavariama1/ListBuddies
随机推荐
- python基础知识---操作文件
一.打开文件 open()函数 open函数返回一个文件对象. 用法:open('文件名','模式') 打开文件的模式有: r,只读模式(默认). w,只写模式.[不可读:不存在则创建:存在则删除内 ...
- scala-类
---恢复内容开始--- 随笔记录scala中,有哪些类,如何定义一个类,有哪些注意点. 一,scala中有哪些类? 1,简单类 class 2,单例模式 object 3,伴生类 4,case cl ...
- 基本TCP套接字编程
1.listen函数 将主动套接字转换成一个被动套接字 backlog指定相应套接字连接队列的大小. 监听套接字有2个队列: (1)未完成连接队列,接收客户SYN,发出SYN.ACK,等待完成三次握手 ...
- linux下mv命令使用方法
1.作用mv命令来为文件或目录改名或将文件由一个目录移入另一个目录中.该命令等同于DOS系统下的ren和move命令的组合.它的使用权限是所有用户.2.格式mv [options] 源文件或目录 目标 ...
- jquery 原理
/* * my-jquery-1.0 *//* * 网上也有很多实现的版本,不过这是我在我自己的理解下写的,加上注释,希望可以解释清楚.*//* * 整个jquery包含在一个匿名函数中,专业点叫闭包 ...
- mysql - 缺失范围和连续范围
初始化数据 # 创建表 DROP TABLE IF EXISTS g; CREATE TABLE g( a INT )ENGINE=INNODB; # 初始化数据 ; ; ; ; ; ; ; ; ; ...
- Cdnbes负载均衡的权重用法解释
(1)相同域名添加两条记录,解析不同的ip,可以设置权重,比如权重2,就意思占百分之20 ,数字越大,优先级越大 (2)这个hash 如果用户访问的源是挂掉的.会去第二个源
- cookie处理
有时候我们需要验证浏览器中是否存在某个cookie,因为基于真实的cookie 的测试是无法通过白盒和集成测试完成的.webdriver 可以读取.添加和删除cookie信息. webdriver 操 ...
- [整理]一个有关Latch(锁存器)的有趣问题
起源 今天诳论坛,突然发现了一个有关latch的问题,由于对D Flip-Flop和Latch还有些疑问,就点击了进去,一看果然有些意思,也挺有学习意义的,于是本文就诞生了.喊出口号~Just not ...
- hdu 1849(Rabbit and Grass) 尼姆博弈
Rabbit and Grass Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...