ionic-javascript实现质感设计组件

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



版权声明:本文为博主原创文章,未经博主允许不得转载。

ionic自定义图标

最近在做ionic移动开发的一个小东西,作为一个外貌协会,为了追求界面美观,每个icon都是要找半天,找到最合适最好看的。这是一件很浪费时间的事。 首先自己去设计图标太浪费时间其次找现成的图标很多...
  • sinat_21274091
  • sinat_21274091
  • 2016年10月05日 23:00
  • 2468

好看的JS脚本案例

http://www.html5tricks.com/8-html5-css3-app-plugin.html http://www.csdn.net/article/2012-02-0...
  • emovie
  • emovie
  • 2014年03月27日 15:00
  • 754

流光溢彩!金属质感特效字轻松做

1.新建一个文件,这里鱼用了PS默认大小。   2.浅灰色输入文字,这里输入了“赑屃”二字。      3.按住ctrl点击文字图层得到文字选区。   4.保持选区状态进入通道面板,新建一个...
  • haibo0668
  • haibo0668
  • 2016年06月02日 12:46
  • 120

Flutter进阶—质感设计之卡片

Card控件是质感设计中的卡片控件,作为详细信息的入口。卡片有圆角和阴影,卡片是用于表示一些相关信息的面板,例如相册,地理位置,餐食,联系细节等。import 'package:flutter/mat...
  • hekaiyou
  • hekaiyou
  • 2017年02月06日 17:26
  • 629

一定要知道!好的设计竟能如此重要

2015-08-04 应酷 优秀网页设计 设计师们都知道一个赏心悦目的网站是多么重要。今天我们要进行更深入地探讨,好的设计不仅仅是看着好看,更是一个可以带来效益的品牌。 下...
  • timtimup123321
  • timtimup123321
  • 2015年08月09日 22:49
  • 312

简易的渐变沉浸式

我们都知道,在手机的屏幕上,最上面一条会有一条黑色 的背景,上面显示的是手机信号和电池电量时间之类的,这样子的布局可能并不好看。 而沉浸式,就是将黑色的背景,改为和我们的布局一样的毕竟色或者...
  • Liu_ser
  • Liu_ser
  • 2017年10月26日 10:59
  • 91

扁平化设计与质感设计

  • heye13
  • heye13
  • 2015年06月04日 13:27
  • 429

教你 P 照片:十五步把一张普通照片处理得很有质感

http://daily.zhihu.com/story/2695720
  • stanmarsh
  • stanmarsh
  • 2014年08月29日 20:53
  • 758

沉浸式透明渐变

首先我们在values里面的styles添加一行代码:truebuild.gradle 里面的API改为19:defaultConfig { applicationId "com.ex...
  • healer1
  • healer1
  • 2017年11月27日 21:16
  • 38

10个HTML5美化版复选框和单选框

转自:http://www.html5tricks.com/10-pretty-checkbox-radiobox.html 单选框Radiobox和复选框checkbox在网页中也十分常见,虽然...
  • chelen_jak
  • chelen_jak
  • 2015年04月02日 08:24
  • 103346
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ionic-javascript实现质感设计组件
举报原因:
原因补充:

(最多只允许输入30个字)