HTML5手机页面实现摇一摇功能

由于工作需要,要求实现手机页面的摇一摇功能(非APP),通过搜索和提取案例中的源码,获取了如下代码:

<script>
if (window.DeviceMotionEvent) {
window.addEventListener(‘devicemotion’, deviceMotionHandler, false);
} else {
alert(“您的浏览器不支持运动传感事件”);
}

// 定义一个变量保存上次更新的时间
var last_update = 0;

// 紧接着定义x、y、z记录三个轴的数据以及上一次出发的时间
var x = 0;
var y = 0;
var z = 0;
var last_x = 0;
var last_y = 0;
var last_z = 0;

function deviceMotionHandler(eventData) {

// 获取含重力的加速度
var acceleration = eventData.accelerationIncludingGravity;

// 获取当前时间
var curTime = new Date().getTime();
var diffTime = curTime – last_update;

// 固定时间段
if (diffTime > 100) {
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 > 2000) {
// TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作
alert(“摇一摇!”);
}
last_x = x;
last_y = y;
last_z = z;
}
}
</script>

代码解读:

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

2、var acceleration = eventData.accelerationIncludingGravity;用于获取含重力的加速度,以便提取x、y、z轴的加速度分量。

3、为了有效感应动作并限制意外触发和连续触发,添加了diffTime 和speed双重限制。其中,var speed = Math.abs(x + y + z – last_x – last_y – last_z) / diffTime * 10000;算法可以感应三位空间中的有效动作。

© 2014, 李德涛博客. 版权所有.

《HTML5手机页面实现摇一摇功能》有3个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注