189 8069 5689

HTML5实现的手机摇一摇

  自从HTML 5的DeviceOrientation被开发出来,很多开发者开始研究其特性,并对此开发出了摇一摇,计步器等应用。小编近日闲着无聊,也开发出了一个摇一摇网页应用,感兴趣的小伙伴可亲身体验一下。

在房县等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、网站制作 网站设计制作按需制作网站,公司网站建设,企业网站建设,品牌网站制作,成都全网营销,成都外贸网站建设公司,房县网站建设费用合理。

  扫码访问

HTML 5实现的手机摇一摇

HTML 5实现的手机摇一摇

  效果图

HTML 5实现的手机摇一摇

HTML 5实现的手机摇一摇

  技术解析

  (1) DeviceOrientation

  DeviceOrientation是HTML 5的重要特性之一,它将底层的方向传感器和运动传感器进行了高级封装,提供了对DOM两种事件的支持:

  1. deviceOrientation:它封装了方向传感器的数据事件,可以获取手机静止状态下的方向数据,如手机的倾斜角度和方向。

  2. deviceMotion:它封装了运动传感器的数据事件,能够获取手机运动过程中的运动加速度等数据。

  通过这两个事件,我们能够获取到移动电话的重力感应,罗盘方向等数据,然后利用这些数据做一些有趣的事情。比如,手机上的重力感应球就是使用了DeviceOrientation。

  DeviceOrientation API事件

  监控移动事件

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion',deviceMotionHandler, false);
}

 获取重力加速度

function deviceMotionHandler(eventData) {
  var acceleration =eventData.accelerationIncludingGravity;
}

  (2) 证实用户在摇手机的几点考虑:

  1. 大部分用户摇手机有一个主方向。

  2. 摇手机过程中加速度数据在x,y,z方向上数据一定会改变。

  3. 不能误判手机正常移动过程。比如,手机在口袋中,走路的时候,加速度数据也会发生变化。

  因此,我们计算摇手机的过程不仅仅是计算手机在x,y,z三个方向上加速度的变化,时间的变化间隔,还包含了在固定时间间隔中变化的速度,以此来触发事件。

HTML 5实现的手机摇一摇

  源码托管在GITHUB上 

   https://github.com/favccxx/favshake



本文名称:HTML5实现的手机摇一摇
文章网址:http://cdxtjz.cn/article/ghgcih.html

其他资讯