html5 摇一摇,HTML 5实现的手机摇一摇

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

扫码访问

spacer.gif

效果图

spacer.gif

00c5f4fd40c56f4bfc7efb554ec011bc.gif

技术解析

(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三个方向上加速度的变化,时间的变化间隔,还包含了在固定时间间隔中变化的速度,以此来触发事件。

1aac879e1a9b4f9caabd84036633630e.png

源码托管在GITHUB上

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值