MG--滚动的视觉差效果

#几句代码完成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
}
}
}```

时间: 2024-10-11 06:05:21

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

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

想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更好的建议,请大家评论,一同探讨, 好了废话不多说,下面开始干活了! 首先,说一下我想实现的基本功能: 此方法需要有2个基本形参,,一个是我要监测的标签a,另一个是我要监测标签相对于哪个标签b做的距离检测. 当a和b的距离达到一定范围的时候,让网页局部发生一些变化效果,这是我们的预期. 以下是我的方法

仿小米视觉差效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>动画模拟</title> <script src="jq.js"></script> <style> article,div{margin: 380px 0;border: solid 1px gray

视觉差效果 - jqyery scrollTop原理

原理是用页面的滚动高度scrollTop()来控制背景图的位置 附上源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g

Parallax.js|强大的javascript视觉差特效引擎

简要教程 Parallax.js是一款功能非常强大的javascript视觉差特效引擎插件.通过这个视觉差插件可以制作出非常炫酷的视觉差特效.它可以检测智能设备的方向.你可以将它作为jQuery插件来使用,也可以以纯JS的方式来使用. 查看演示     下载插件       使用方法 HTML结构 该视觉差特效的基本HTML结构使用的是一个无序列表,每一个列表项给它们一个class layer和一个data-depth属性来指定该层的深度.深度为0的层将是固定不动的,深度为1的层运动效果最激烈的

H5如何制作动态视觉差背景

制作网站时,可能会用到视觉差效果 如图 视觉差在制作网页时会有很炫酷的效果,今天要讲的是如何呈现动态视觉差 效果如图: 制作方法首先需要一个视觉差的插件 我所用的插件是一款较为大众的视觉差插件 <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css&quo

jQuery炫酷3d背景视觉差特效

Smart3D是一款效果非常炫酷的jQuery图片背景视觉差特效插件.该插件将图片以层的形式排放,当鼠标滑过图片的时候,每一层的图片的运动速度各不相同,从而形成强烈的视觉差效果. 效果演示:http://www.htmleaf.com/Demo/201504051628.html 下载地址:http://www.htmleaf.com/jQuery/shijuecha/201504051627.html

jQuery和CSS3超酷全屏视觉差幻灯片特效

这是一款效果非常炫酷的jQuery和CSS3全屏视觉差幻灯片特效.该幻灯片采用半透明的遮罩层作为文字说明层.在幻灯片切换时,文字有动态放大的效果.图片和文字的移动形成了一种微妙的视觉差效果. 效果演示:http://www.htmleaf.com/Demo/201506162049.html 下载地址:http://www.htmleaf.com/jQuery/Slideshow-Scroller/201506162048.html

Swiper实现全屏视觉差轮播

Swiper作为当代流行的js框架,非常受到青睐,这里演示swiper在pc端全屏视觉轮播的效果,这也是pc端常用的一种特性 一  以教师节为主题的一个全屏轮播 1 首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件以及jquery-1.11.3.min.js官网都有(可以下载完整的压缩文件) <link rel="stylesheet" href="css/swiper.min.css" > <script

iOS具有视觉间差效果、模糊效果的顶部视图

附上我的demo源码:https://github.com/wqhiOS/WUParallaxView 先来看下效果: 利于AutoLayout可以很简单的完成这个视觉间差效果,这里默认大家的都已经掌握了AutoLayout. 第一步 首先把基本工作完成 新建一个项目 如下:并在viewController里放入tableView, (可以用代码 也可以用storyBoard,我比较懒 所以就...) 给tableView添加约束,距离父视图顶部的距离,一定要为0,不能是64啊...如下图: 基