一、摇一摇功能

<!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

js微信摇一摇功能以及api的更多相关文章

  1. shake.js实现微信摇一摇功能

    项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码 ...

  2. C#开发微信门户及应用(38)--微信摇一摇红包功能

    摇一摇周边红包接口是为线下商户提供的发红包功能.用户可以在商家门店等线下场所通过摇一摇周边领取商家发放的红包.我曾经在<C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实 ...

  3. C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实现

    ”摇一摇周边“是微信提供的一种新的基于位置的连接方式.用户通过“摇一摇”的“周边”页卡,可以与线下商户进行互动,获得商户提供的个性化的服务.微信4月份有一个赠送摇一摇设备的活动,我们有幸获得赠送资格, ...

  4. Android仿iPhone晃动撤销输入功能(微信摇一摇功能)

    重力传感器微信摇一摇SensorMannager自定义alertdialogSensorEventListener 很多程序中我们可能会输入长文本内容,比如短信,写便笺等,如果想一次性撤销所有的键入内 ...

  5. js html5 仿微信摇一摇

    看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...

  6. H5+JS实现手机摇一摇功能

    在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...

  7. html5实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  8. IOS开发之——类似微信摇一摇的功能实现

    首先,一直以为摇一摇的功能实现好高大上,结果百度了.我自己也模仿写了一个demo.主要代码如下: 新建一个项目,名字为AnimationShake. 主要代码: - (void)motionBegan ...

  9. HTML5的DeviceOrientation实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

随机推荐

  1. Hadoop - YARN 概述

    一 概述       Apache Hadoop YARN (Yet Another Resource Negotiator,还有一种资源协调者)是一种新的 Hadoop 资源管理器,它是一个通用资源 ...

  2. warez世界顶级压缩作品网站

    http://www.pouet.net/ warez世界顶级压缩作品网站

  3. 让EasyDarwin只支持RTP over TCP传输

    我们经常需要EasyDarwin服务器支持公网流媒体传输,但很多时候,播放器默认都是通过RTP over UDP的形式在RTSP SETUP中请求,往往都以在内网接收不到UDP数据失败结束,那么我们如 ...

  4. Hibernate基础知识介绍

    一.什么是Hibernate? Hibernate,翻译过来是冬眠的意思,其实对于对象来说就是持久化.持久化(Persistence),即把数据(如内存中的对象)保存到可永久保存的存储设备中(如磁盘) ...

  5. firefox coap安装使用

    coap 插件: 百度搜索firefox coap也能找到该插件https://addons.mozilla.org/zh-CN/firefox/addon/copper-270430/在firefo ...

  6. ps 图层混合模式

  7. margin在块元素、内联元素中的区别 padding

    (1)margin在块元素.内联元素中的区别 HTML(这里说的是html标准,而不是xhtml)里分两种基本元素,即block和inline.顾名思义,block元素就是以”块”表现的元素(bloc ...

  8. SDUT 2402 水杯最小表面积问题

    水杯 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 天气逐渐变热了,准备考研的高童鞋打算在夏天来临之前自己动手造一个水杯,以备口 ...

  9. 配置JDK和Tomcat环境变量(转)

    1.安装JDK 安装好JDK后,再配置JDK的环境变量:在“我的电脑”上点右键—>“属性”—>“高级”—> “环境变量(N)”. 新建系统变量JAVA_HOME:C:/Program ...

  10. Python: PS 滤镜--旋转模糊

    本文用 Python 实现 PS 滤镜中的旋转模糊,具体的算法原理和效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/details/392 ...