GJM : AlloyTouch实战--60行代码搞定QQ看点资料卡
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/kandian
先验货
如你体验所见,流程的滚动的同时还能支持头部的动画?不断地加载新数据还能做到流畅的滑动!怎么做得的?使用AlloyTouch CSS 0.2.0及以上版本便可!
头部动画
加载更多
实现代码
var infoList = document.getElementById("infoList"),
mockHTML = infoList.innerHTML,
scroller = document.getElementById("scroller"),
header = document.getElementById("header"),
userLogo = document.getElementById("user-logo-wrapper"),
loading = false,
alloyTouch = null;
Transform(scroller, true);
Transform(header);
header.originY = -70;
header.translateY = -70;
Transform(userLogo);
alloyTouch = new AlloyTouch({
touch: "#wrapper",
vertical: true,
target: scroller,
property: "translateY",
maxSpeed: 2,
outFactor: 0.1,
min: 160 * -20 + window.innerHeight - 202 - 50,
max: 0,
lockDirection: false,
touchStart: function () {
reastMin();
},
lockDirection: false,
change: function (v) {
if (v <= this.min + 5 && !loading) {
loading = true;
loadMore();
}
if (v < 0) {
if (v < -140) v = -140;
var scaleY = (240 + v) / 240;
header.scaleY = scaleY;
userLogo.scaleX = userLogo.scaleY = scaleY;
userLogo.translateY = v / 1.7;
} else {
var scaleY = 1 + v / 240;
header.scaleY = scaleY;
userLogo.scaleX = userLogo.scaleY = scaleY;
userLogo.translateY = v / 1.7;
}
}
})
function loadMore() {
setTimeout(function () {
infoList.innerHTML += mockHTML;
loading = false;
reastMin();
}, 500)
}
function reastMin() {
alloyTouch.min = -1 * parseInt(getComputedStyle(scroller).height) + window.innerHeight - 202;
}
document.addEventListener("touchmove", function (evt) {
evt.preventDefault();
}, false);
就这么多代码。当然你要引用一个transformjs和alloy_touch.css.js。先看这一堆:
Transform(scroller, true);
Transform(header);
header.originY = -70;
header.translateY = -70;
Transform(userLogo);
Transform(xxx)是什么意思?
赋予xxx transformation能力
第一个scroller加上true代表关闭透视投影,为什么要关闭透视投影?
因为scroller里面是有文本,防止文本在IOS中模糊的情况。
header是顶部的那个蓝色的区域。为什么要设置originY和translateY?为什么要设置为-70?
因为header的高度为140px,用户向上滚动的过程中,需要对其进行scaleY变换。通常我们的做法是设置CSS3 transform-origin为 center top。而使用transformjs之后,可以抛弃transform-origin,使用originY或者originX属性便可。originY 设置为 -70,相对于高度为140的header来说就是center top。
再看这一堆:
alloyTouch = new AlloyTouch({
touch: "#wrapper",
vertical: true,
target: scroller,
property: "translateY",
maxSpeed: 2,
outFactor: 0.1,
lockDirection: false,
min: 160 * -20 + window.innerHeight - 202 - 50,
max: 0,
touchStart: function () {
resetMin();
},
lockDirection: false,
...
...
...
})
...
...
function resetMin() {
alloyTouch.min = -1 * parseInt(getComputedStyle(scroller).height) + window.innerHeight - 202;
}
使用AlloyTouch最关键的一点就是计算min和max的值。min和max决定了可以滚到哪里,到了哪里会进行回弹等等。这里max是0毫无疑问。
但是min那一堆加减乘除是什么东西?
这里首次加载是20行数据,每一行高度大概160,主意是大概, window.innerHeight是视窗的高度,202px是滚动的容器的padding top的值,50px是用来留给显示加载更多的...
如上图所示,主要是需要求???的高度。
那么怎么解决大概160*20的问题?
touchStart的时候reastMin。resetMin会去通过getComputedStyle计算整个scroller的高度。
maxSpeed是干什么用的?
用来限制滚动的最大速度,个人感觉调整到2挺舒适,这个可以根据场景和被运动的属性灵活配置。
outFactor是干什么用的?
用来设置超出min或者max进行拖拽的运动比例系数,系数越小,超出min和max越难拖动,也就是受到的阻力越大。
lockDirection是干什么用的?
lockDirection默认值是true。代表用户起手时候是横向的,而你监听的是竖直方向的touch,这样的话是不会触发运动。只有起手和监听对应上才会有触摸运动。这里把lockDirection设置成false就没有这个限制,不管用户起手的direction,都会有触摸运动。
再看AlloyTouch注入的change事件!头部动效核心的一个配置函数:
change: function (v) {
if (v <= this.min + 5 && !loading) {
loading = true;
loadMore();
}
if (v < 0) {
if (v < -140) v = -140;
var scaleY = (240 + v) / 240;
header.scaleY = scaleY;
userLogo.scaleX = userLogo.scaleY = scaleY;
userLogo.translateY = v / 1.7;
} else {
var scaleY = 1 + v / 240;
header.scaleY = scaleY;
userLogo.scaleX = userLogo.scaleY = scaleY;
userLogo.translateY = v / 1.7;
}
}
v代表当前被运动对象的被运动属性的当前的值,根据这个v去做一些效果和加载更多。
什么时候加载更多?
当滚动你能看到加载更多的时候去加载更多
什么时候能看到加载更多?
v <= this.min + 5。 可以看到change回调里可以拿到this,也就是AlloyTouch对象的实例,当v等于this.min代表滚到了底部,所以这里加上5代表快要滚动底部已经看到了加载更多。就去执行loadMore函数。
loading是干什么用的?
防止重复loadMore用得,因为change执行得很频繁,所以这里会通过loading的状态去锁上。
下面一堆设置scaleX、scaleY、translateY以及一堆数字是怎么来的?
慢慢调试得出的最佳效果~~反正就是根据v的数值映射到 header和用户头像的transform属性上,这里就不一一讲了。
再看loadMore:
function loadMore() {
setTimeout(function () {
infoList.innerHTML += mockHTML;
loading = false;
reastMin();
}, 500)
}
这里使用了一段假的HTML去模拟AJAX异步请求以及数据转HTML的过程,整个耗时500ms,500ms后会去:
- 插入HTML
- 重置loading状态
- 重置AlloyTouch的min
最后:
document.addEventListener("touchmove", function (evt) {
evt.preventDefault();
}, false);
阻止掉整个document的默认事件,不会把整个页面拖下来,在手Q里的话,你就看不到网址和X5内核提供技术支持了。
开始AlloyTouch
Github:https://github.com/AlloyTeam/AlloyTouch
任何意见和建议欢迎new issue,AlloyTouch团队会第一时间反馈。
GJM : AlloyTouch实战--60行代码搞定QQ看点资料卡的更多相关文章
- AlloyTouch实战--60行代码搞定QQ看点资料卡
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/kandian 先验货 访问DEMO你也可以点击这里 源代码可以点击这里 如你体验所见,流程的滚动的 ...
- 30行代码搞定WCF并发性能测试
[以下只是个人观点,欢迎交流] 30行代码搞定WCF并发性能 轻量级测试. 1. 调用并发测试接口 static void Main() { List< ...
- 10行代码搞定移动web端自定义tap事件
发发牢骚 移动web端里摸爬滚打这么久踩了不少坑,有一定移动web端经验的同学一定被click困扰过.我也不列外.一路走来被虐的不行,fastclick.touchend.iscroll什么的都用过, ...
- Tensorflow快餐教程(1) - 30行代码搞定手写识别
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/lusing/article/details ...
- 如何用Python统计《论语》中每个字的出现次数?10行代码搞定--用计算机学国学
编者按: 上学时听过山师王志民先生一场讲座,说每个人不论干什么,都应该学习国学(原谅我学了计算机专业)!王先生讲得很是吸引我这个工科男,可能比我的后来的那些同学听课还要认真些,当然一方面是兴趣.一方面 ...
- [Unity Editor]10行代码搞定Hierarchy排序
在日常的工作和研究中,当给我们的场景摆放过多的物件的时候,Hierarchy面板就会变得杂乱不堪.比如这样: 过多的层次结构充斥在里面,根层的物件毫无序列可言,整个层次面板显示非常的杂乱不堪,如 ...
- BaseHttpListActivity,几行代码搞定Android Http列表请求、加载和缓存
Android开发中,向服务器请求一个列表并显示是非常常见的需求,但实现起来比较麻烦,代码繁杂. 随着应用的更新迭代,这种需求越来越多,我渐渐发现了实现这种需求的代码的共同点. 于是我将Activit ...
- python爬煎蛋妹子图--20多行代码搞定煎蛋妹子图库
如果说一个人够无聊的话... 就会做一些十分美(wei)丽(suo)的事情啦哈哈哈... 好的,话不多说,进入正题. 正如标题所示,我们今天的目标很简单: 代码要少,妹子要好. 步骤如下: 1. 首先 ...
- 100行代码搞定抖音短视频App,终于可以和美女合唱了。
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由视频咖 发表于云+社区专栏 本文作者,shengcui,腾讯云高级开发工程师,负责移动客户端开发 最近抖音最近又带了一波合唱的节奏,老 ...
随机推荐
- Android之Dedug--Circular dependencies cannot exist in AnimatorSet
今日,在学习AnimatorSet时,使用play.with.after.before时,代码书写如下: ObjectAnimator animator1 = ObjectAnimator.ofFlo ...
- 集成基于CAS协议的单点登陆
相信大家对单点登陆(SSO,Single Sign On)这个名词并不感到陌生吧?简单地说,单点登陆允许多个应用使用同一个登陆服务.一旦一个用户登陆了一个支持单点登陆的应用,那么在进入其它使用同一单点 ...
- LINQ Group By操作
在上篇文章 .NET应用程序与数据库交互的若干问题 这篇文章中,讨论了一个计算热门商圈的问题,现在在这里扩展一下,假设我们需要从两张表中统计出热门商圈,这两张表内容如下: 上表是所有政区,商圈中的餐饮 ...
- Direct3D Draw函数 异步调用原理解析
概述 在D3D10中,一个基本的渲染流程可分为以下步骤: 清理帧缓存: 执行若干次的绘制: 通过Device API创建所需Buffer: 通过Map/Unmap填充数据到Buffer中: 将Buff ...
- Entity Framework 6 Recipes 2nd Edition(9-5)译->删除一个断开的实体
9-5. 删除一个断开的实体 问题 我们要把一个把WCF上取回的对象做上删除的标志. 解决方案 假设我们有如Figure 9-5所示实体的支付与票据的模型. Figure 9-5. 一个支付与票据的模 ...
- xcode8.1 插件失效的问题
1,查看 Xcode 插件安装目录 ~/Library/Application Support/Developer/Shared/Xcode/Plug-ins 鼠标点一下桌面, command+shi ...
- css中常见的属性-----在路上(14)
一.css文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...
- SVM分类与回归
SVM(支撑向量机模型)是二(多)分类问题中经常使用的方法,思想比较简单,但是具体实现与求解细节对工程人员来说比较复杂,如需了解SVM的入门知识和中级进阶可点此下载.本文从应用的角度出发,使用Libs ...
- Java学习之注解Annotation实现原理
前言: 最近学习了EventBus.BufferKinfe.GreenDao.Retrofit 等优秀开源框架,它们新版本无一另外的都使用到了注解的方式,我们使用在使用的时候也尝到不少好处,基于这种想 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...