Html5+JS实现手机摇一摇功能

所属分类: 网页制作 / html5 阅读数: 2024
收藏 0 赞 0 分享

HTML5一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:

1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。

2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。 使用它我们能够很容易的实现重力感应、指南针等有趣的功能,在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation API的deviceOrientation事件来实现的。 其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能:手机摇一摇。

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

1. [代码]监听运动传感事件
2. [代码]获取含重力的加速度
3. [代码]核心方法实现代码

HTML5一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:

1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。

2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
使用它我们能够很容易的实现重力感应、指南针等有趣的功能,在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientation
API的deviceOrientation事件来实现的。

其实它还能帮助我们在网页上实现一个手机应用里非常常见而时尚的功能:手机摇一摇。

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


1. [代码]监听运动传感事件

复制代码
代码如下:

if (window.DeviceMotionEvent) {
window.addEventListener(‘devicemotion’,deviceMotionHandler, false);
}

2. [代码]获取含重力的加速度

复制代码
代码如下:

function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
}

3. [代码]核心方法实现代码

复制代码
代码如下:

var SHAKE_THRESHOLD = xxx;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;</p> <p>function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;</p> <p>var curTime = newDate().getTime();</p> <p>if ((curTime – lastUpdate)> 100) {</p> <p>var diffTime = curTime -last_update;
last_update = curTime;</p> <p>x = acceleration.x;
y = acceleration.y;
z = acceleration.z;</p> <p>var speed = Math.abs(x +y + z – last_x – last_y – last_z) / diffTime * 10000;</p> <p>if (speed > SHAKE_THRESHOLD) {
alert(“shaked!”);
}
last_x = x;
last_y = y;
last_z = z;
}
}

更多精彩内容其他人还在看

html5+css3进度条倒计时动画特效代码【推荐】

下面小编就为大家分享一篇html5+css3进度条倒计时动画特效代码【推荐】。希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML5实现多张图片上传功能

这篇文章主要介绍了基于HTML5实现多张图片上传功能,在单张图片上传的基础上实现多张图片上传功能,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

html5 canvas移动浏览器上实现图片压缩上传

这篇文章主要为大家详细介绍了html5 canvas移动浏览器上实现图片压缩上传的相关方法,提出了解决方法,分享了解决问题的思路,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

HTML5 canvas实现移动端上传头像拖拽裁剪效果

这篇文章主要为大家详细介绍了HTML5 canvas实现移动端上传头像拖拽裁剪效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

通过HTML5 Canvas API绘制弧线和圆形的教程

这篇文章主要介绍了通过HTML5 Canvas API绘制弧线和圆形的教程,用JavaScript可以自定义弧度以及设定起始终末点,使用JavaScript需要的朋友可以参考下
收藏 0 赞 0 分享

利用HTML5 Canvas制作键盘及鼠标动画的实例分享

这篇文章主要介绍了利用HTML5 Canvas制作键盘及鼠标动画的实例,文中分别分享了一个键盘控制的小球移动和鼠标触发的小丑小脸例子,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5 3D衣服摇摆动画特效

这篇文章主要为大家分享了一款HTML5 3D衣服摇摆动画特效,一款基于HTML5 Canvas的3D动画杰作,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

HTML5 Canvas入门学习教程

这篇文章主要介绍了HTML5 Canvas入门学习教程,讲解了Canvas标签的基本使用及基本的JavaScript对Canvas的操作方式,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5 Canvas基本线条绘制的实例教程

这篇文章主要介绍了HTML5 Canvas基本线条绘制的实例教程,包括直线和折线的绘制方法,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5 Canvas的常用线条属性值总结

这篇文章主要介绍了HTML5 Canvas的常用线条属性值总结,包括对lineCap属性、lineJoin属性、线宽和笔触样式四种属性的各种值的实例讲解,整理得非常给力,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多