js微信摇一摇功能以及api

一、摇一摇功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <p>inde.html访问成功</p>

    <div id="status" style="font-size: 60px;color: red;"></div>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            //运动事件监听

            if (window.DeviceMotionEvent) {

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

            }else{

                alert('您的手机不支持摇一摇功能！');

            }

            //获取加速度信息

            //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。

            //而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。

            var SHAKE_THRESHOLD = 8000;    //阈值越大，触发摇晃事件时手机摇晃的程度越剧烈

            var last_update = 0;

            var x, y, z, last_x = 0, last_y = 0, last_z = 0;

            function deviceMotionHandler(eventData) {

                    var acceleration =eventData.accelerationIncludingGravity;

                    var curTime = new Date().getTime();

                    if ((curTime-last_update)> 10) {

                        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 > SHAKE_THRESHOLD && stop) {

                            //dosomething

                        }

                        last_x = x;

                        last_y = y;

                        last_z = z;

                    }

            }

        }

    </script>

</body>

</html>

二、加速传感器API

本文档旨在通过介绍HTML5 DeviceOrientation 和DeviceMotion两个接口的使用，来实现某些场景应用，如

摇一摇功能（DeviceMotion）
重力感应方向控制（DeviceOrientation）
关于DeviceOrientation和DeviceMotion两个接口的详细说明，参考了:http://w3c.github.io/deviceorientation/spec-source-orientation.html
本文的中实现的用例仅用来测试，在生产环境中应用需要修改其中的参数或者重新编程。

摇一摇

摇一摇功能是很多原生APP都可以实现的功能，如微信中的摇一摇找好友，QQ音乐中的摇一摇换歌等。它们都是利用了手机加速传感器提供的API，当监听到手机加速变化的事件时，根据获取的加速值来执行不同的动作。

接口说明

在Web APP中HTML5 也提供了类似的接口，就是DeviceMotionEvent。DeviceMotion封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

DeviceMotionEvent对象属性列表：

属性释义
event.accelaration x(y,z):设备在x(y,z)方向上的移动加速度值
event.accelarationIncludingGravity x(y,z):考虑了重力加速度后设备在x(y,z)方向上的移动加速度值
event.rotationRate alpha,beta,gamma:设备绕x,y,z轴旋转的角度
event.accelarationIncludingGravity与event.accelaration的区别在于前者加入了重力加速度，即在z轴方向加了9.8，在x,y方向上的值两者相同。

旋转速度rotationRate：alpha、beta、gamma的概念与DeviceOrientationEvent一致。
区别在于：
DeviceOrientationEvent的值是相对于初始状态的差值，只要设备方向不变，怎么动都不会影响数值；
DeviceMotionEvent是相对于之前的某个瞬间值的差值时间比，即变化的速度，一旦设备静止则会恢复为0。

实现方法

Shake对象设计

属性值
SHAKE_THRESHOLD 阈值。阈值越大，触发摇晃事件时手机摇晃的程度越剧烈
x x方向的加速值
y y方向的加速值
z z方向的加速值
deviceMotionHandler 摇晃事件处理程序
方法作用
init 初始化Shake对象
参数值
threshold 自定义阈值，默认2000
callback 摇晃后的回调函数
示例

function Shake(threshold,callback){            this.SHAKE_THRESHOLD = threshold ? threshold : 2000; //定义阈值            this.last_update = 0;            this.x = this.y = this.z = this.last_x = this.last_y = this.last_z = 0;            this.init = function(){                if (window.DeviceMotionEvent) {                    window.addEventListener('devicemotion', this.deviceMotionHandler, false);                } else {                    alert('您的浏览器不支持DeviceMotion');                }            };            var that = this;            this.deviceMotionHandler = function(eventData) {                var acceleration = eventData.accelerationIncludingGravity;                var curTime = new Date().getTime();                if ((curTime - that.last_update) > 100) {                    var diffTime = curTime - that.last_update;                    that.last_update = curTime;                    that.x = acceleration.x;                    that.y = acceleration.y;                    that.z = acceleration.z;                    var speed = Math.abs(that.x + that.y + that.z - that.last_x - that.last_y - that.last_z) / diffTime * 10000;                    if (speed > that.SHAKE_THRESHOLD) {                        if(window.console && console.log){                            console.log("shaked");                        }                        if(callback != undefined){                            callback(that);                        }                    }                    that.last_x = that.x;                    that.last_y = that.y;                    that.last_z = that.z;                }            }        };

使用方法

手机摇一摇测试

当手机摇晃页面时，会弹出shaked的提示，并且在页面上显示摇晃时的x,y,z方向的加速度值。
扩展应用

给Shake对象的callback参数可以实现不同的摇晃目的，如抽奖。需要在callback函数中调用抽奖系统的接口。
示例

function shakeCallback(){
var odata = {name:”drawprize”,act_id : 0000};
HBAPP.Activity.register(odata,function(json){
if(json.error == 0){
if(json.result.draw){
//中奖信息
//……
}
}
});
}
2. 重力感应

重力感应也是原生APP中经常见到的一个功能，在Web App中的应用多见于判断屏幕的旋转方向，以及在此基础上实现的场景应用，如控制页面上物体的左右移动，加减速等。

在Web App中实现以上的功能，需要实时获取屏幕的旋转方向参数，这些参数可以从浏览器的利用HTML5的DeviceOrientation API获得。

接口说明

当浏览器的Orientation发生变化时，触发DeviceOrientation事件，并返回一个DeviceOrientationEvent对象，其属性列表如下：

属性释义
alpha 设备指示的方向，根据指南针的设定情况而定
beta 设备绕x轴旋转的角度
gamma 设备绕y轴旋转的角度
注：不同版本的手机操作系统和浏览器，以及不同的应用程序中内置的浏览器对deviceorientation事件的支持不尽相同。尤其在Android平台上，可能会出现有的设备正常工作，有的则毫无反应的情况。

工作原理

根据event对象的三个方向的参数来确定设备的旋转角度。其中，alpha的取值范围是0-360,这个需要根据设备的指南针设定情况而定，一般来说，设备指向正北方向时为0.beta值为设备绕x轴旋转的角度，取值范围为-180-180。gamma取值范围-90-90.

这里面alpha值的意义并不大，主要参考beta和gamma值。
当屏幕从水平沿y轴向左倾斜时gamma值变为负值，向右倾斜变为正值。
档屏幕从水平沿x轴向前倾斜时beta值变为正值，向后倾斜时变为负值。
所以，如果我们设定一个阈值，当beta和gamma的绝对值大于这个阈值时，我们就认为设备发生了旋转。另外根据beta和gamma的值来判断向左倾斜还是向右倾斜，以及倾斜的程度。

实现方式和示例

首先是为浏览器绑定deviceorientation事件和处理程序。

//add deviceorientation event listener
if(window.DeviceOrientationEvent){
window.addEventListener(‘deviceorientation’,DeviceOrientationHandler,false);
}else{
alert(“您的浏览器不支持DeviceOrientation”);
}
然后在事件处理程序中处理相应的动作

function DeviceOrientationHandler(event){
var alpha = event.alpha,
beta = event.beta,
gamma = event.gamma;

    if(alpha != null || beta != null || gamma != null){

        dataContainerOrientation.innerHTML = "alpha:" + alpha + "<br />beta:" + beta + "<br />gamma:" + gamma;

        //判断屏幕方向

        var html = "";

        if( Math.abs(gamma) < GAMMA_MIN && Math.abs(beta) > BETA_MAX ){

            html = "屏幕方向：Portrait";

        }

        if( Math.abs(beta) < BETA_MIN && Math.abs(gamma) > GAMMA_MAX ){

            html = "屏幕方向：Landscape";

        }

        var gamma_html = "";

        if( gamma > 0 ){

            gamma_html = "向右倾斜";

        }else{

            gamma_html = "向左倾斜";

        }

        html += "<br />"+gamma_html

        stage.innerHTML = html;

    }else{

        dataContainerOrientation.innerHTML = "当前浏览器不支持DeviceOrientation";

    }

}
这个示例中展示了如何利用beta和gamma值来展示屏幕的旋转方向和侧翻方向。要实现更精确的物体判断，还需要复杂的算法来计算。

扩展应用

使用DeviceOrientation API接口可以实现在web中获取手机设备的屏幕旋转方向参数，在示例的基础上进行改进，可以扩展到在屏幕上控制页面元素的移动，实现动画或游戏的目的。例如通过调整屏幕的方向控制页面上的小球走迷宫，控制小车的移动躲避障碍等。

API出处：
作者：codemarker
链接：http://www.jianshu.com/p/5769075e9885

摇一摇功能出处：http://www.cnblogs.com/shizq/p/5611171.html