ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 检测设备方向 **7、手机设备方向** **7.1 方向** Orientation API用于检测手机的摆放方向(竖放或横放)。 **(1)检测浏览器是否支持** ``` if(window.DeviceOrientationEvent){ //支持 }else{ //不支持 } ``` **(2)监听方向变化** 一旦设备的方向发生变化,会触发deviceorientation事件,可以对该事件指定回调函数。 ``` window.addEventListener("deviceorientation", listener,false); function listener(event){ var alpha = event.alpha; var beta = event.beta; var gamma = event.gamma; } ``` 上面代码中,event事件对象有alpha、beta和gamma三个属性,它们分别对应手机摆放的三维倾角变化。要理解它们,就要理解手机的方向模型。当手机水平摆放时,使用三个轴标示它的空间位置:x轴代表横轴、y轴代表竖轴、z轴代表垂直轴。event对象的三个属性就对应这三根轴的旋转角度。 - alpha:表示围绕z轴的旋转,0~360(度)。当设备水平摆放时,顶部指向地球的北极,alpha此时为0。 - beta:表示围绕x轴的旋转,-180~180(度),由前向后。当设备水平摆放时,beta此时为0。 - gramma:表示围绕y轴的选择,-90~90(度),从左到右。当设备水平摆放时,gramma此时为0。 **7.2 移动(motion)** **(1)检测是否支持** ``` if(window.DeviceMotionEvent){ //支持 }else{ //不支持 } ``` **(2)和方向事件一样,移动也有监听事件:devicemotion** ``` window.addEventListener('devicemotion',listener,true) function listener(event){ var acceleration = event.acceleration; var accelerationIncludingGravity = event.accelerationIncludingGravity; var rotationRate = event.rotationRate; var interval = event.interval; } ``` 上面代码中,event事件对象有acceleration、accelerationIncludingGravity、rotationRate和interval四个属性。 属性说明: **(1)acceleration、accelerationIncludingGravity** acceleration和accelerationIncludingGravity属性都包含三个轴: x轴:西向东(acceleration.x) y轴:南向北(acceleration.y) z轴:垂直地面(acceleration.z) **(2)rotationRate** rotationRate有三个值: alpha: 设备沿着垂直屏幕的轴的旋转速率 (桌面设备相对于键盘) beta: 设备沿着屏幕左至右方向的轴的旋转速率(桌面设备相对于键盘) gamma: 设备沿着屏幕下至上方向的轴的旋转速率(桌面设备相对于键盘) **(3)interval** interval 表示的是从设备获取数据的频率,单位是毫秒。 更多:检测设备方向 **简单的摇一摇功能:** ``` var SHAKE_THRESHOLD = 3000; var last_update = 0; var x = y = z = last_x = last_y = last_z = 0; if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', deviceMotionHandler, false); } function deviceMotionHandler(eventData) { var acceleration = eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); var diffTime = curTime - last_update; if (diffTime > 100) { 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; if (speed > SHAKE_THRESHOLD) { //dosomething }; last_x = x; last_y = y; last_z = z; } } ```