HTML5+JavaScript实现仿微信摇一摇效果

在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态、加速度等数据(另还有deviceOrientation事件提供了设备角度、朝向等信息)。

而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果。

事件监听

演示地址(手机浏览):http://mrdede.com/UploadFiles/demo/js/shake/demo.html

把监听事件绑定给 deviceMotionHandler

获取设备加速度信息 accelerationIncludingGravity

将加速度信息打印置页面,通过演示地址可以看到随着设备的移动,屏幕上数字的变化。

 

摇晃判断

演示地址(手机浏览):http://mrdede.com/UploadFiles/demo/js/shake/demo_1.html

“摇一摇”的动作既“一定时间内设备了一定距离”,因此通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,即可进行设备是否有进行晃动的判断。而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。

100毫秒进行一次位置判断,若前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值,则判断设备进行了摇晃操作。

 

然后通过上面2个演示,然后再增加点样式效果,即可模拟一个简单的微信摇一摇界面。

应用演示:简易模拟微信摇一摇

演示地址(手机浏览):http://mrdede.com/UploadFiles/demo/js/shake/demo_2.html