手机摇一摇让方向盘旋转

贴代码前，我们先讲下一些基本常识。摇晃手机分为两个行为，一个时候开始摇晃手机，一个是手机停止摇晃。这分别是两个事件

• 1.deviceOrientation：方向传感器数据的事件，通过监听该事件可以获取手机静态状态下的方向数据；
• 2.deviceMotion: 运动传感器数据事件，通过监听该事件可以获取手机运动状态下的运动加速度数据；

要实现这个功能，我们只需要做两件事。第一个就是判断是否开始摇晃（有效的摇晃）发生的事件（这里是方向盘旋转），第二个就是停止摇晃（方向盘复位）。

JS：

var shakeThreshold = 1000; // 定义一个摇动的阈值
    var lastUpdate = 0; // 记录上一次摇动的时间
    var x, y, z, lastX, lastY, lastZ; // 定义x、y、z记录三个轴的数据以及上一次触发的数据
 
// 监听传感器运动事件
if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
    alert('本设备不支持devicemotion事件');
}
 
// 运动传感器处理
function deviceMotionHandler(eventData) {
    var acceleration = eventData.accelerationIncludingGravity; // 获取含重力的加速度
    var curTime = new Date().getTime();
 
    // 100毫秒进行一次位置判断
    if ((curTime - lastUpdate) > 100) {
 
        var diffTime = curTime - lastUpdate;
        lastUpdate = curTime;
 
        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;
 
        var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
        // 前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值，则判断设备进行了摇晃操作
        if (speed > shakeThreshold) {
            rotateDic(); //这里是调用方向旋转函数
        }
 
        lastX = x;
        lastY = y;
        lastZ = z;
    }
}

//这是方向盘的旋转代码  这里可以根据自己的需要来进行调整
var x, y, n = 0, ny = 0, rotINT, rotYINT 
function rotateDIV() {
    x = document.getElementById("rotate1")
        clearInterval(rotINT)
        rotINT = setInterval("startRotate()", 10)
}
function rotateYDIV() {
    y = document.getElementById("rotatey1")
        clearInterval(rotYINT)
        rotYINT = setInterval("startYRotate()", 10)
}
function startRotate() {
    n = n + 1
        x.style.transform = "rotate(" + n + "deg)"
        x.style.webkitTransform = "rotate(" + n + "deg)"
        x.style.OTransform = "rotate(" + n + "deg)"
        x.style.MozTransform = "rotate(" + n + "deg)"
        if (n == 180 || n == 360) {
            clearInterval(rotINT)
            if (n == 360) {
                n = 0
            }
        }
}
function startYRotate() {
    ny = ny + 1
        y.style.transform = "rotateY(" + ny + "deg)"
        y.style.webkitTransform = "rotateY(" + ny + "deg)"
        y.style.OTransform = "rotateY(" + ny + "deg)"
        y.style.MozTransform = "rotateY(" + ny + "deg)"
        if (ny == 180 || ny >= 360) {
            clearInterval(rotYINT)
            if (ny >= 360) {
                ny = 0
            }
        }
}

 

html:(这里放一个圆形方向盘)

<div id="rotate1" class="rotate3"></div>