HTML 5实现手机摇一摇的功能

1、html 5实现手机摇一摇的功能在百度开发者大会上介绍过html5另外一个重要特性就是deviceorientation，它将底层的方向传感器和运动传感器举行了高级封装，提供了dom大事的支持。这个特性包括两种大事：deviceorientation：封装了方向传感器数据的大事，可以猎取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。devicemotion：封装了运动传感器数据的大事，可以猎取手机运动状态下的运动加速度等数据。用法它我们能够很简单的实现重力感应、指南针等好玩的功能，在手机上将十分实用。例如opera h5体验版里的重力感应球示例就是通过监听deviceorienta

2、tion api的deviceorientation大事来实现的。用html5实现手机摇一摇的功能其实它还能协助我们在网页上实现一个手机应用里十分常见而时尚的功能：手机摇一摇。我最开头见到这个功能其实是在photoshake里，后来包括微信在内的许许多多、大大小小的应用都加入了这个功能。用html5实现手机摇一摇的功能假如你曾经做过android或者ios开发，对于这样的功能可能十分了解。但是下面，我们将在web上首次实现这个功能。让我们赶快开头吧！devicemotionevent（设备运动大事）返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴：x，y和z（暗示如下图所 示，x

3、轴横向贯通手机屏幕或者笔记本键盘，y轴纵向贯通手机屏幕或笔记本键盘，z轴垂直于手机屏幕或笔记本键盘）。由于有些设备可能没有硬件来排解重力的 影响，该大事会返回两个属性，accelerationincludinggravity（含重力的加速度）和acceleration（加速度），后者 排解了重力的影响。用html5实现手机摇一摇的功能对于deviceorientation，html5rocks上有一篇具体的介绍文章this end up： using device orientation，很有参考价值。我们先来监听运动传感大事。javacript if (window.devicemotion

4、event) window.addeventlistener('devicemotion',devicemotionhandler, false); /javascript然后猎取含重力的加速度。javacript function devicemotionhandler(eventdata) var acceleration =eventdata.accelerationincludinggravity; /javascript下面就涉及到我们如何计算用户摇摆手机的原理了。考虑的要点如下：1、 用户大多时候都是以一个方向为主晃动手机来举行摇动；2、 在晃动时三个方向的加速度数

5、据必然都会变幻；3、 我们不能误判手机正常的运动行为，想一想，假如你的手机放在裤兜里，走路时它也会有加速度数据变幻。综上，我们应当针对三个方向的加速度举行计算，间隔测量它们，考察它们在固定时光段里的变幻率，而且需要为它确定一个阈值来触发动作。我们需要定义几个变量来记录历史x、y、z轴的数据以及上一次触发的时光。核心办法实现代码如下：var shake_threshold = xxx; var last_update = 0; var x, y, z, last_x, last_y, last_z; function devicemotionhandler(eventdata) var acce

6、leration =eventdata.accelerationincludinggravity; var curtime = newdate().gettime(); if (curtime - lastupdate)> 100) var difftime = curtime -last_update; last_update = curtime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = math.abs(x +y + z - last_x - last_y - last_z) / difftime * 10000; if (speed > shak