随着移动互联网的发展和技术门槛的降低,国内的互联网巨头,逐渐地开源它们沉淀的一些技术,这些开源的技术大部分都已经在这些巨头的实际业务中经过实践的,所以总体的性能,安全性等方面应该是比较好的了,最近腾讯的AlloyTeam团队(web前端团队)开源了AlloyTouch和AlloyFinger两个优秀的触摸和手势库,为我们在移动端的的web开发提供了更好的选择。据了解AlloyTouch和AlloyFinger已经大量使用在qq,qq空间,qq看点等等。所以非常感谢腾讯AlloyTeam团队开源这些技术,有利于我们学习和运用。
记得以前在移动端使用手势库时,我一直都是使用hammer.js,虽然这也是一个很优秀的手势库,但实现的代码是在太多了,大概有两千多行,而AlloyFinger仅仅200多行就搞定了。当然,每一个库都有优点和缺点,最终的选择还是的根据自己的实际业务选择。
拥抱开源,同时也要分享自己的技术。
下面我将会根据AlloyTouch这个js库实现一个简单的但是在移动端和app中常用的功能。
看一下demo:
可以看到的是,当我们往下滑动屏幕时,header这块它会往下放大,比如logo和文字都放大了,当我们放开手指,停止滑动的时候,header会自动的阻尼回弹到原来的位置。
当我们往上滑动屏幕时,header这一块它会缓慢缩小直至最后完全“消失”,(其实是缩小了,直至不可见),然后内容区就滚动。
这个功能其实在一些移动端中是经常使用的。
首先我们的引入两个比较重要的js文件,一个是alloy_touch.js,
地址:https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js
另一个是transforms.js
地址:https://github.com/AlloyTeam/AlloyTouch/blob/master/transformjs/transform.js
下面是alloy_touch的用法:
new AlloyTouch({
touch:"#wrapper",//反馈触摸的dom
vertical: true,// 监听用户横向触摸
target: target, //运动的对象
property: "translateY", //被运动的属性
min: 100, //不必需,运动的最终的最小的值
max: 2000, //不必需,运动的最终的最大值
sensitivity: 1,不必需,触摸区域的灵敏度,默认值为1,可以为负数
factor: 1,不必需,表示触摸位移与被运动属性映射关系,默认值是1
step: 45,不必需,用于校正到step的整数倍
bindSelf: false,
initialVaule: 0,
change:function(value){ },//运动改变过程的回调
touchStart:function(evt, value){ },
touchMove:function(evt, value){ },
touchEnd:function(evt, value){ },//运动结束
tap:function(evt, value){ },
pressMove:function(evt, value){ },
animationEnd:function(value){ }
})
其实最重要的是要理解min和max,比如上面的例子的应用
var view = document.getElementById('myscroll');
var header = document.getElementById('bar-subheader');
var logo = document.getElementById('logo');
var profile = document.getElementById('profile');
Transform(view, true);
Transform(header);
Transform(logo);
Transform(profile);
header.originY = -80;
header.translateY = -80;
document.addEventListener("touchmove", function (evt) {
evt.preventDefault();
}, false);
var loading = false;
alloyTouch = new AlloyTouch({
touch: "#myview",
vertical: true,
target: view,
property: "translateY",
min: null,
max: 0,
touchStart: function () {
if(!alloyTouch.min) {
alloyTouch.min = -1 * parseInt(getComputedStyle(view).height) - 44 + window.innerHeight - 44;
}
},
change: function (v) {
if(v <= this.min + 5 && !loading) {
loading = true;
}
if(v < 0) {
if(v < -160) v = -160;
var scaleY = 1 + v / 160;
header.scaleY = scaleY;
logo.scaleY = logo.scaleX = scaleY;
profile.scaleY = profile.scaleX = scaleY;
}else {
var scaleY = 1 + v / 160;
header.scaleY = scaleY;
logo.scaleX = scaleY;
profile.scaleY = 1;
}
}
});
可以看到,最重要的是要计算min这个值,下面就说一下这个原理。
max设置=0,就是在往下滑动屏幕的时候,在Y的方向上的最终距离是0,也就是说,当我们滑动的时候,change(v)会时刻产生滑动的距离v,所以根据这个v值可以进行放大倍数的计算,然后将放大的值赋值给header进行放大,所以我们可以看到一往下滑动,header就会往下拉长放大,一旦放开手,就会阻尼反弹回到原理的位置,因为我们设置了max的值为0,也就是不往下移动,所以反弹到原来位置。
然而min的值是需要计算的,当我们的手指往上滑动时,transformY的值就会是负值,这个值等于内容滚动区的隐藏的高度,(显示在我们屏幕上能看到的是显示的高度,因为有很多的内容列表没有显示出来,隐藏在列表内容区中,这个隐藏的列表高度就是我们需要求的min值,当然这个值是负数的)
下面是一张手画的图:
其实我们最终要求得min的值就是隐藏的高度,?所代表的高度。
当往上滑动屏幕,其实设置了min的值,内容的显示区就会在Y轴的负方向上移动min,因为这个min值就是隐藏内容的高度,只有这样才能够完全显示隐藏的内容。
其实用法还有很多,可以访问alloyteam的博客获取更多内容
代码已在github上开源,欢迎访问https://github.com/bingcool?tab=repositories
记得以前在移动端使用手势库时,我一直都是使用hammer.js,虽然这也是一个很优秀的手势库,但实现的代码是在太多了,大概有两千多行,而AlloyFinger仅仅200多行就搞定了。当然,每一个库都有优点和缺点,最终的选择还是的根据自己的实际业务选择。
拥抱开源,同时也要分享自己的技术。
下面我将会根据AlloyTouch这个js库实现一个简单的但是在移动端和app中常用的功能。
看一下demo:
可以看到的是,当我们往下滑动屏幕时,header这块它会往下放大,比如logo和文字都放大了,当我们放开手指,停止滑动的时候,header会自动的阻尼回弹到原来的位置。
当我们往上滑动屏幕时,header这一块它会缓慢缩小直至最后完全“消失”,(其实是缩小了,直至不可见),然后内容区就滚动。
这个功能其实在一些移动端中是经常使用的。
首先我们的引入两个比较重要的js文件,一个是alloy_touch.js,
地址:https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js
另一个是transforms.js
地址:https://github.com/AlloyTeam/AlloyTouch/blob/master/transformjs/transform.js
下面是alloy_touch的用法:
new AlloyTouch({
touch:"#wrapper",//反馈触摸的dom
vertical: true,// 监听用户横向触摸
target: target, //运动的对象
property: "translateY", //被运动的属性
min: 100, //不必需,运动的最终的最小的值
max: 2000, //不必需,运动的最终的最大值
sensitivity: 1,不必需,触摸区域的灵敏度,默认值为1,可以为负数
factor: 1,不必需,表示触摸位移与被运动属性映射关系,默认值是1
step: 45,不必需,用于校正到step的整数倍
bindSelf: false,
initialVaule: 0,
change:function(value){ },//运动改变过程的回调
touchStart:function(evt, value){ },
touchMove:function(evt, value){ },
touchEnd:function(evt, value){ },//运动结束
tap:function(evt, value){ },
pressMove:function(evt, value){ },
animationEnd:function(value){ }
})
其实最重要的是要理解min和max,比如上面的例子的应用
var view = document.getElementById('myscroll');
var header = document.getElementById('bar-subheader');
var logo = document.getElementById('logo');
var profile = document.getElementById('profile');
Transform(view, true);
Transform(header);
Transform(logo);
Transform(profile);
header.originY = -80;
header.translateY = -80;
document.addEventListener("touchmove", function (evt) {
evt.preventDefault();
}, false);
var loading = false;
alloyTouch = new AlloyTouch({
touch: "#myview",
vertical: true,
target: view,
property: "translateY",
min: null,
max: 0,
touchStart: function () {
if(!alloyTouch.min) {
alloyTouch.min = -1 * parseInt(getComputedStyle(view).height) - 44 + window.innerHeight - 44;
}
},
change: function (v) {
if(v <= this.min + 5 && !loading) {
loading = true;
}
if(v < 0) {
if(v < -160) v = -160;
var scaleY = 1 + v / 160;
header.scaleY = scaleY;
logo.scaleY = logo.scaleX = scaleY;
profile.scaleY = profile.scaleX = scaleY;
}else {
var scaleY = 1 + v / 160;
header.scaleY = scaleY;
logo.scaleX = scaleY;
profile.scaleY = 1;
}
}
});
可以看到,最重要的是要计算min这个值,下面就说一下这个原理。
max设置=0,就是在往下滑动屏幕的时候,在Y的方向上的最终距离是0,也就是说,当我们滑动的时候,change(v)会时刻产生滑动的距离v,所以根据这个v值可以进行放大倍数的计算,然后将放大的值赋值给header进行放大,所以我们可以看到一往下滑动,header就会往下拉长放大,一旦放开手,就会阻尼反弹回到原理的位置,因为我们设置了max的值为0,也就是不往下移动,所以反弹到原来位置。
然而min的值是需要计算的,当我们的手指往上滑动时,transformY的值就会是负值,这个值等于内容滚动区的隐藏的高度,(显示在我们屏幕上能看到的是显示的高度,因为有很多的内容列表没有显示出来,隐藏在列表内容区中,这个隐藏的列表高度就是我们需要求的min值,当然这个值是负数的)
下面是一张手画的图:
其实我们最终要求得min的值就是隐藏的高度,?所代表的高度。
当往上滑动屏幕,其实设置了min的值,内容的显示区就会在Y轴的负方向上移动min,因为这个min值就是隐藏内容的高度,只有这样才能够完全显示隐藏的内容。
其实用法还有很多,可以访问alloyteam的博客获取更多内容
http://www.alloyteam.com/2016/12/mobile-web-touch-and-motion-solutions-alloytouch-open-source/
http://www.cnblogs.com/nield-bky/p/6195723.html
代码已在github上开源,欢迎访问https://github.com/bingcool?tab=repositories