ionic-javascript实现质感设计组件

     随着移动互联网的发展和技术门槛的降低，国内的互联网巨头，逐渐地开源它们沉淀的一些技术，这些开源的技术大部分都已经在这些巨头的实际业务中经过实践的，所以总体的性能，安全性等方面应该是比较好的了，最近腾讯的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