在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态、加速度等数据(另还有deviceOrientation事件提供了设备角度、朝向等信息)。
而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果。
运动事件监听
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('你的手机太差了,买个新的吧。');
}
获取加速度信息
“摇一摇”的动作既“一定时间内设备了一定距离”,因此通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,即可进行设备是否有进行晃动的判断。而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) > 100) {
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;
var status = document.getElementById("status");
if (speed > SHAKE_THRESHOLD) {
doResult();
}
last_x = x;
last_y = y;
last_z = z;
}
}
分享到:
相关推荐
手机端HTML5微信摇一摇案例,简单易懂,可直接使用。
HTML5手机微信摇一摇游戏代码基于jquery.1.11.1.min.js制作,模仿微信摇一摇功能,可手动摇,效果流畅。
html5手机微信摇一摇抽奖代码是一款手机移动端模仿html5微信摇一摇游戏功能网页特效。
HTML5手机微信摇一摇游戏代码
HTML5 摇一摇代码 微信摇一摇 移动端摇一摇,简单易懂,HTML5代码,一看即懂,方便移植至任何系统
HTML5模拟微信摇一摇功能,有两种方式实现,分别在代码中实现
1、HTML5手机微信摇一摇游戏代码基于jquery.1.11.1.min.js制作,模仿微信摇一摇功能,可手动摇,效果流畅。非常适合学习以及二次开发,欢迎大家来下载! 二、注意事项 1、开发环境为Visual Studio 2013,无数据库...
微信php摇一摇游戏
html5手机微信摇一摇特效.zip
纯HTML加JS获取移动设备摇动数据。
html5微信摇一摇抽取活动奖项,本代码为html5利用重力感应标签得到用户摇动手机的动作,触发事件
HTML5仿手机微信摇一摇游戏特效源码.zip
本代码为html5利用重力感应标签得到用户摇动手机的动作。 再根据动作,显示晃动次数,得到这个次数。 次数得到了,动作你也监听到了。 你觉得还有什么你做不到的呢。^_^ (注:本代码不包含后台程序逻辑,未加...
也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对于我们的需求只需要摇一摇这个动作却是大相径庭。 其实H5+JavaScript写出来的...
微信摇一摇添加好久,很多朋友都在玩,那么基于html5 DeviceOrientation 如何实现微信摇一摇功能的呢?下面由脚本之家小编把详细内容分享给大家,供大家参考。
最近接了个项目,其中有需求是要实现摇一摇红包功能,在网上搜了好久,都没有找到源码,没办法,只有自动写了,下面小编把我的劳动成果分享给大家供大家参考,本文写的不好,还请各位大侠提出宝贵意见,共同学习进步...
微信摇一摇html5 小游戏 实用性蛮强的基本该图片就ok
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!