关闭

ionic-javascript实现质感设计组件

标签: ionic质感alloyTeam
403人阅读 评论(0) 收藏 举报
分类:
     随着移动互联网的发展和技术门槛的降低,国内的互联网巨头,逐渐地开源它们沉淀的一些技术,这些开源的技术大部分都已经在这些巨头的实际业务中经过实践的,所以总体的性能,安全性等方面应该是比较好的了,最近腾讯的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的博客获取更多内容

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



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:174338次
    • 积分:2840
    • 等级:
    • 排名:第12554名
    • 原创:98篇
    • 转载:45篇
    • 译文:1篇
    • 评论:35条
    最新评论