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,angularjs界面设计

Ionic入门五:表单 一、输入框 list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。 1.输入框属性:placeh...

使用Ionic3开发混合APP的架构设计总结(一)

Ionic在2017年3月7号在其官方博客宣布 Ionic3 正式版本发布,Ionic3和2版本的主要区别就是对懒加载的全面使用。在使用Ionic2的时候,如果应用比较大,将所有的component,...

扁平化设计与质感设计

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

Flutter进阶—质感设计之底部导航

BottomNavigationBar即底部导航栏控件。显示在应用底部的质感设计控件,用于在少量视图中切换。底部导航栏包含多个以标签、图标或两者搭配的形式显示在项目底部的项目,提供了应用程序的顶级视图...

Flutter基础—质感设计

Material Design,中文名:质感设计,是由Google推出的全新设计语言,旨在为手机、平板电脑、台式机和其他平台提供更一致、更广泛的外观和感觉。从2014年开始,Android到衍生的An...

一些漂亮的界面设计。

设计一直在变化,不停的创作新鲜,良好的设计作品不仅仅是在视觉上给用户带来舒适,而且还会给用户在情绪上带来非常舒缓的感觉,一个好的界面设计,甚至会带来巨大的商业机会。设计师要跟上这个趋势,最好的方式就是...

ionic入门教程第十二课-通用模块的分离$ionicModal

ionic入门教程第十二课-通用模块的分离$ionicModal

Ionic-wechat项目边开发边学(四):可伸缩输入框,下拉刷新, 置顶删除

上一篇文章主要介绍了ion-list的使用, ion-popup的使用, 通过sass自定义样式, localStorage的使用, 自定义指令和服务. 这篇文章实现的功能有消息的置顶与删除, 了聊天...

ionic-基于angularjs和javascript实用的顶部搜索过滤组件

最近看新闻,首先是乐视的资金危机,现在死乐视的裁员,好听点叫“末位淘汰”。 年关将至,不少员工在翘首期盼年终奖。然而也有一部分员工开始恐慌,因为不少企业一到年终都会纷纷忙着裁员。双十一期间,大家正疯狂...

JavaScript File API应用——如何设计和实现Ajax文件上传组件

(1)精简“带进度条文件上传组件”的设计与实现 XMLHttpRequest第二版为我们提供了便利的progress事件,通过为xhr.upload.onprogress指定处理函数,可以快速制作进度...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ionic-javascript实现质感设计组件
举报原因:
原因补充:

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