鄙人在html5界混了这么久竟然没有做过摇一摇相关的东西，条件自然的屏蔽了这个属性，今天一哥们说起有这个方法，有种深深的痛，毅然决然先学习一下！一下是摇一摇实现的大致思路。

有了摇一摇，就可以做一些模拟原生的玩意了，现在的实现逻辑虽然木有办法调用系统的东西，但是多少能播放个音乐啥的。如果想实现震动一下的效果还是得利用js调用系统设备才行。

以下是学习时看的文章，转载的内容：

文章原文地址：http://blog.csdn.net/hfahe/article/details/7516317

在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation，它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件：

1、 deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。

2、 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

使用它我们能够很容易的实现重力感应、指南针等有趣的功能，在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientationAPI的deviceOrientation事件来实现的。


其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能：手机摇一摇。

我最开始见到这个功能其实是在PhotoShake里，后来包括微信在内的许许多多、大大小小的应用都加入了这个功能。


PhotoShake：照片摇一摇

如果你曾经做过Android或者iOS开发，对于这样的功能可能非常了解。但是下面，我们将在Web上首次实现这个功能。

让我们赶快开始吧！

DeviceMotionEvent（设备运动事件）返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴：x，y和z（示意如下图所示，x轴横向贯穿手机屏幕或者笔记本键盘，y轴纵向贯穿手机屏幕或笔记本键盘，z轴垂直于手机屏幕或笔记本键盘）。因为有些设备可能没有硬件来排除重力的影响，该事件会返回两个属性，accelerationIncludingGravity（含重力的加速度）和acceleration（加速度），后者排除了重力的影响。


对于DeviceOrientation，HTML5Rocks上有一篇详细的介绍文章《This End Up： Using Device Orientation》，很有参考价值。

我们先来监听运动传感事件。

[html]view plaincopy

1. if(window.DeviceMotionEvent){

2. window.addEventListener('devicemotion',deviceMotionHandler,false);

3. }

然后获取含重力的加速度。

[html]view plaincopy

1. functiondeviceMotionHandler(eventData){

2. varacceleration=eventData.accelerationIncludingGravity;

3. }

下面就涉及到我们如何计算用户摇晃手机的原理了。考虑的要点如下：

1、 用户大多时候都是以一个方向为主晃动手机来进行摇动；

2、 在晃动时三个方向的加速度数据必定都会变化；

3、 我们不能误判手机正常的运动行为，想一想，如果你的手机放在裤兜里，走路时它也会有加速度数据变化。

综上，我们应该针对三个方向的加速度进行计算，间隔测量它们，考察它们在固定时间段里的变化率，而且需要为它确定一个阈值来触发动作。

我们需要定义几个变量来记录历史x、y、z轴的数据以及上一次触发的时间。核心方法实现代码如下：

[html]view plaincopy

1. varSHAKE_THRESHOLD=xxx;

2. varlast_update=0;

3. varx,y,z,last_x,last_y,last_z;

4.

5. functiondeviceMotionHandler(eventData){

6. varacceleration=eventData.accelerationIncludingGravity;

7.

8. varcurTime=newDate().getTime();

9.

10.if((curTime-lastUpdate)>100){

11.

12.vardiffTime=curTime-last_update;

13.last_update=curTime;

14.

15.x=acceleration.x;

16.y=acceleration.y;

17.z=acceleration.z;

18.

19.varspeed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000;

20.

21.if(speed>SHAKE_THRESHOLD){

22.alert("shaked!");

23.}

24.last_x=x;

25.last_y=y;

26.last_z=z;

27.}



1、 deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。

2、 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

不多说直接上代码，

Javascript：


[javascript]view plaincopy

varSHAKE_THRESHOLD=3000;

varlast_update=0;

varx=y=z=last_x=last_y=last_z=0;

functioninit(){

if(window.DeviceMotionEvent){

window.addEventListener('devicemotion',deviceMotionHandler,false);

}else{

alert('notsupportmobileevent');

}

}

functiondeviceMotionHandler(eventData){

varacceleration=eventData.accelerationIncludingGravity;

varcurTime=newDate().getTime();

if((curTime-last_update)>100){

vardiffTime=curTime-last_update;

last_update=curTime;

x=acceleration.x;

y=acceleration.y;

z=acceleration.z;

varspeed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000;

if(speed>SHAKE_THRESHOLD){

alert("摇动了");

media.setAttribute("src","http://211.148.5.228:8002/Pages/test/Kalimba.mp3");

media.load();

media.play();

}

last_x=x;

last_y=y;

last_z=z;

}

}


Html：



[html]view plaincopy

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="utf-8"/>

<metaname="viewport"content="width=device-width,initial-scale=1.0"/>

<title>摇一摇功能</title>

<scripttype="text/javascript">

//Javascript

</script>

</head>

<bodyonload="init()">

<p>用力摇一摇你手机</p>

<audiostyle="display:hiden"id="musicBox"preload="metadata"controlssrc="http://211.148.5.228:8002/Pages/test/Kalimba.mp3"autoplay="false">

</audio>

</body>

</html>


IOS 测试：Safari 弹框\不播放音乐, Chroma 弹框\不播放音乐,UC弹框\不播放音乐


Andriod 测试：UC弹框\播放音乐,Chroma 弹框\播放音乐,内置浏览器弹框\播放音乐