#几句代码完成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. require.js 入门笔记

    网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高. 而且长长的JS代码 ...

  2. DataTable自定义排序

    使用JQ DataTable 的时候,希望某列数据可以进行自定义排序,操作如下:(以中文排序和百分比排序为例) 1:定义排序类型: //百分率排序 jQuery.fn.dataTableExt.oSo ...

  3. Winform button按钮设置快捷键

    1)Text属性命名时后面&加键名,如:文件(&F) 2)添加一个ContextMenuStrip控件,同时在Items里添加一个项,并为项设置快捷键,把Visible设置为false ...

  4. Linux C 开发环境配置

    换了新电脑,重装了Fedora10,所有开发环境都要重新配置啦,开个随笔记录下过程,说不定以后还要用~ 首先Fedora10装好之后是不带 VIM 的,果断安装之: 打开终端,首先 su 命令切换到r ...

  5. [delphi]SetWindowsHookExA函数入口处修改

    library Project2; uses SysUtils, Classes, windows, Dialogs; {$R *.res} function GetModuleHandleA(a: ...

  6. 01.Sencha ExtJS 6 - Generate Workspace and Application

    生成workspace         下载gpl版本的ExtJs6         在https://www.sencha.com/legal/GPL/页面的右侧申请链接来下载,或者使用链接http ...

  7. CGRectGet *** 获取控件坐标的方法

    CGRectGetHeight返回label本身的高度 CGRectGetMinY返回label顶部的坐标 CGRectGetMaxY 返回label底部的坐标 CGRectGetMinX 返回lab ...

  8. redis的安装和启动

    Windows下Redis的安装及PHP扩展使用 时间 2014-10-28 17:47:09  CSDN博客 原文  http://blog.csdn.net/wyqwclsn/article/de ...

  9. C#删除文件

    string file =System.Web.HttpContext.Current.Server.MapPath(fileUrl); if (System.IO.File.Exists(file) ...

  10. julia的优化?

    julia> function fib1(n) if n==1 return n else return n+fib1(n-1) end end fib1 (generic function w ...