html5实现微信摇一摇功能

在 HTML5 中，功能提供的事件封装了设备运动传感器的时间。通过改变时间，可以获取设备的运动状态、加速度等数据（也有提供设备角度、方向等信息的事件）。

通过判断设备的运动状态，可以帮助我们在网页上实现“摇”的交互效果。

运动事件监控

if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
    alert('你的手机太差了，买个新的吧。');
}

获取加速度信息

“晃动”的动作是“一定时间” 因此，通过监测上一步得到的x、y、z值在一定时间范围内的变化率，可以判断设备是否正在颤抖。为了防止误判正常运动，需要为变化率设定一个合适的临界值。

 function deviceMotionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity;
        var curTime = new Date().getTime();
        if ((curTime - last_update) > 100) {
            var diffTime = curTime - last_update;
            last_update = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
            var status = document.getElementById("status");
            if (speed > SHAKE_THRESHOLD) {
                doResult();
            }
            last_x = x;
            last_y = y;
            last_z = z;
        }
    }