HTML 5实现的手机摇一摇

自从HTML 5的DeviceOrientation被开发出来，很多开发者开始研究其特性，并对此开发出了摇一摇，计步器等应用。小编近日闲着无聊，也开发出了一个摇一摇网页应用，感兴趣的小伙伴可亲身体验一下。

扫码访问

效果图

技术解析

（1） DeviceOrientation

DeviceOrientation是HTML 5的重要特性之一，它将底层的方向传感器和运动传感器进行了高级封装，提供了对DOM两种事件的支持：

1. deviceOrientation：它封装了方向传感器的数据事件，可以获取手机静止状态下的方向数据，如手机的倾斜角度和方向。

2. deviceMotion：它封装了运动传感器的数据事件，能够获取手机运动过程中的运动加速度等数据。

通过这两个事件，我们能够获取到移动电话的重力感应，罗盘方向等数据，然后利用这些数据做一些有趣的事情。比如，手机上的重力感应球就是使用了DeviceOrientation。

DeviceOrientation API事件

监控移动事件

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

获取重力加速度

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

（2）证实用户在摇手机的几点考虑：

1. 大部分用户摇手机有一个主方向。

2. 摇手机过程中加速度数据在x，y，z方向上数据一定会改变。

3. 不能误判手机正常移动过程。比如，手机在口袋中，走路的时候，加速度数据也会发生变化。

因此，我们计算摇手机的过程不仅仅是计算手机在x，y，z三个方向上加速度的变化，时间的变化间隔，还包含了在固定时间间隔中变化的速度，以此来触发事件。

源码托管在GITHUB上

时间： 2024-10-09 22:50:00

HTML 5实现的手机摇一摇的相关文章

Android手机摇一摇之传感器开发

[声明]转载请注明出处,此文出自指尖飞落的博客:http://blog.csdn.net/huntersnail --尊重作者,知识无价,交流无限! 一.手机摇晃计算 1.手机摇晃的动作 2.一个点三个轴X.Y.Z ①计算从a--b的增量:a点到b点各个轴相减之和假设a(x1,y1,z1).b(x2,y2,z2) 增量ab=(x2-x1)+(y2-y1)+(z2-z1) ②将所有的增量进行汇总,得到一个大的增量,假设是N.并进行判断: 如果N>=设定的域值M,则确定在摇晃手机. 说明:N=ab

手机摇一摇功能音量大小跟系统音量一致

源码免费下载布局文文件:main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent&qu

HTML5手机重力与方向感应的应用——摇一摇效果

http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果. DeviceOrientation包括两个事件: 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方

利用html5实现类似微信的手机摇一摇功能

利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1. deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2. deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. 不多说直接上代码, Javascript: [javascript] view plaincopy var SHAKE_THRESHOLD = 3000; var last_update = 0;

iOS摇一摇手机，播放微信摇一摇音效

实现微信摇一摇播放音效,代码如下:- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event{ if (motion == UIEventSubtypeMotionShake) { NSLog(@"摇一摇,哈哈哈"); [self playSoundEffect:@"yaoyiyao"]; }}-(void)playSoundEffect:(N

通过手机Web实现手机摇一摇的功能

经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. deviceMotion:封装了运动传感器数据的事件,可以获取手机运动

HTML5实现手机摇一摇的功能

利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1. deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2. deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. js如下: <scirpt> var SHAKE_THRESHOLD = 3000; var last_update = 0; var x = y = z = last_x = last_y =

利用html5实现类似微信的手机摇一摇功能，并播放音乐，并且解决中文乱码的问题。

转载了@三井学长:http://blog.csdn.net/david1030/article/details/8229008 转载了@Hello Csn楠!:http://www.cnblogs.com/csn0721/ 1. deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2. deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. 不多说直接上代码, Javas

Unity手机摇一摇

项目中遇到手机摇一摇功能边整理下: using UnityEngine; using System.Collections; public class ShakePhone : MonoBehaviour { float old_y = 0; float new_y = 0; float max_y = 0; float min_y = 0; float d_y = 0; void Update() { new_y = In