实现一下webapp的手机摇一摇功能

SteveZheng 2013-09-23 13:48:42 累计浏览 1,742 次

标签摇一摇

最近开发一个小东西需要摇一摇，本来以为需要用到Hybrid才可以实现，查了下资料才发现原来利用DeviceMotion可以实现这个需求。先上DeviceMotion的简介https://developer.mozilla.org/en-US/docs/Web/Reference/Events/devicemotion

通过DeviceMotionEvent，我们可以获得accelerationIncludingGravity的x, y, z属性。从而通过x, y, z的变化来判断设备是否有摇一摇的事件发生。

function handleMotionEvent(event) {

    var x = event.accelerationIncludingGravity.x;
    var y = event.accelerationIncludingGravity.y;
    var z = event.accelerationIncludingGravity.z;

    // Do something awesome.
}

window.addEventListener("devicemotion", handleMotionEvent, true);