js微信摇一摇功能以及api

时间:2022-12-14 03:14:45

一、摇一摇功能

<!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
本文的中实现的用例仅用来测试,在生产环境中应用需要修改其中的参数或者重新编程。

  1. 摇一摇

摇一摇功能是很多原生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