移动终端学习2：触屏原生js事件及重力感应

如今智能移动设备已经渗透到人们生活的方方面面，用户数量也在不断迅速增长（市场研究机构 eMarketer 在今年初发表的趋势报告中预测，2014年至2018年，中国智能手机用户从总人口的 38.3%增加到 51.1%；2014年中国智能手机用户已超过5亿，2018年将超过7亿） 

1. 触屏手势

随着大屏幕时代的到来，物理键盘逐渐退化，只剩下今天可见的 home 或 return 等少数按键。大部分的手机操控都依赖触屏完成。

现在触屏操作主要依靠电容式触摸屏传感器，可以实现多点触控。触屏手势参考如下：Touch Gesture Reference Guide,TouchGestureGuide，TouchGestureCards

 

下面我们来总结一下，经常用到的触屏手势有哪些：
 
  • 一只手指
    • 轻扫（swipe）
    • 轻击（tap）
    • 点击（click）
    • 双击（double click）
    • 拖动（pan）
    • 长按（long press）
  • 两只手指
    • 缩放、捏合（pinch）
      • eg.缩放网页、图片
    • 旋转（rotation）
    • 滚动（scroll，类似 mousewheel，不推荐）
  • 三只或更多只指
    • swipe
    • 抓（claw pinch）
      • eg. 回到主界面

 

看了这么多触屏手势，我们再来看看有哪些js的触屏事件

触屏原生js事件示例：

我是个懒人，网上有好的示例，就不重复写了。而且这篇文章确实写的不错。（话说有懒人才有了创新）
 

2. 重力感应：方向&重力（Orientation & Motion）

依赖 磁阻传感器、加速度传感器、角加速度传感器（陀螺仪）、重力传感器、方向传感器（电子罗盘）等

  • 指南针（compass）
  • 地图导航（map、navigation）
  • 现实增强（Augmented reality，AR）
  • 摇一摇（shaking gesture）
  • 游戏控制（game control）
  • 计步器
我对mobile重力感应这部分挺有兴趣的，就搜了很多有关js重力的文章。 
 
 
自己也学着写了个小示例：白色小球根据重力滚动（放到移动设置上看）
  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="gbk"/>
  5     <meta name="viewport"
  6           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  7     <meta name="apple-mobile-web-app-capable" content="yes">
  8     <meta name="apple-touch-fullscreen" content="yes">  
  9     <style>
 10         .test{
 11             border:2px solid green;
 12             width:300px;
 13             height:350px;
 14             background: #000;
 15             position: relative;
 16             COLOR:#FFF;
 17         }
 18         .test #ball{
 19             width:12px;
 20             height:12px;
 21             background: #fff;
 22             -webkit-border-radius:6px;
 23             position: absolute;
 24             left:0;
 25             right: 0;
 26         }
 27     </style>
 28 </head>
 29 <body>
 30 
 31 <h2>设备方向感应测试</h2>
 32 <div id="msg"></div>
 33 
 34 <div id='test' tabindex='0' class="test">
 35     <!--<img src="img/3.png" id="ball">-->
 36     <div id="ball"></div>
 37 </div>
 38 
 39 <img src="http://img01.taobaocdn.com/tps/i1/T15zFIXxJaXXbIZMjj-180-70.png" id="imgLogo" alt="">
 40 <img src="http://img01.taobaocdn.com/tps/i1/T15zFIXxJaXXbIZMjj-180-70.png" id="imgLogo2" alt="">
 41 
 42 <script>
 43     function Orientation(selector){}
 44     Orientation.prototype.init = function(){
 45         window.addEventListener('deviceorientation', this.oriListener, false);
 46         window.addEventListener('MozOrientation', this.oriListener, false); //为firefox所用
 47         window.addEventListener('devicemotion', this.oriListener, false);   //重力感应
 48     }
 49 
 50     Orientation.prototype.oriListener = function(e) {
 51         setTimeout(function(){
 52             handler(e);
 53             deviceMotionHandler(e)
 54         },10);
 55 
 56         function handler(e){
 57             // For FF3.6+
 58             if (!e.gamma && !e.beta) {
 59                 // angle=radian*180.0/PI 在firefox中x和y是弧度值,
 60                 e.gamma = (e.x * (180 / Math.PI)); //转换成角度值,
 61                 e.beta = (e.y * (180 / Math.PI)); //转换成角度值
 62                 e.alpha = (e.z * (180 / Math.PI)); //转换成角度值
 63             }
 64             /* beta:  -180..180 (rotation around x axis) */
 65             /* gamma:  -90..90  (rotation around y axis) */
 66             /* alpha:    0..360 (rotation around z axis) (-180..180) */
 67 
 68             var gamma = e.gamma
 69             var beta = e.beta
 70             var alpha = e.alpha
 71 
 72             if(e.accelerationIncludingGravity){
 73                 // window.removeEventListener('deviceorientation', this.orientationListener, false);
 74                 gamma = e.accelerationIncludingGravity.x*300
 75                 beta = -e.accelerationIncludingGravity.y*300
 76                 alpha = event.accelerationIncludingGravity.z*300
 77             }
 78 
 79             if (this._lastGamma != gamma || this._lastBeta != beta) {
 80                 document.querySelector("#msg").innerHTML = "x: "+ beta.toFixed(2) + " y: " + gamma.toFixed(2) + " z: " + (alpha != null?alpha.toFixed(2):0)
 81 
 82 
 83                 var style = document.querySelector("#ball").style;
 84                 style.left = gamma/90 * 200 + 150 +"px";
 85                 style.top = beta/90 * 200 + 100 +"px";
 86 
 87 
 88                 this._lastGamma = gamma;
 89                 this._lastBeta = beta;
 90             }
 91         }
 92 
 93         function deviceMotionHandler(e) {
 94             /*
 95             if(e.accelerationIncludingGravity){
 96                 var gx = e.accelerationIncludingGravity.x;
 97                 var gy = e.accelerationIncludingGravity.y;
 98                 var gz = e.accelerationIncludingGravity.z;
 99             }
100              var facingUp = -1;
101              if (gz > 0) {
102              facingUp = +1;
103              }
104              var tiltLR = Math.round(((gx) / 9.81) * -90);
105              var tiltFB = Math.round(((gy + 9.81) / 9.81) * 90 * facingUp);
106 
107              //document.getElementById("moCalcTiltLR").innerHTML = tiltLR;
108              // document.getElementById("moCalcTiltFB").innerHTML = tiltFB;
109 
110              var rotation = "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB) + "deg)";
111              document.getElementById("imgLogo").style.webkitTransform = rotation;
112            */
113 
114             var gamma = e.gamma
115             var beta = e.beta
116             var alpha = e.alpha
117 
118             var tiltLR =gamma; //Math.round(((beta) / 9) * -90);
119             var tiltFB = beta;
120 
121             var rotation = "rotate(" + tiltLR + "deg)";
122             var rotation2 = "rotate(" + tiltFB + "deg)";
123             var style = document.querySelector("#imgLogo").style;
124             var style2 = document.querySelector("#imgLogo2").style;
125             style.webkitTransform = rotation;
126             style2.webkitTransform = rotation2;
127         }
128     };
129 
130     (new Orientation()).init();
131 </script>
132 </body>
133 </html>

 

 
posted @ 2013-12-09 16:49  sx_summer  阅读(5772)  评论(1)  编辑  收藏  举报