js實現手機搖一搖

事件監聽
DeviceMotion，html5提供的新的DOM事件，其提供設備的加速信息，表示爲定義在設備上的座標系中的卡爾迪座標。其還提供了設備在座標系中的自轉速率。

DeviceMotionEvent 會在設備發生有意義的擺動(或運動)時產生.事件對象封裝有產生的間距值,旋轉率,和設備加速度.
加速度的計算方式是重力和用戶產生的兩個加速度矢量之和.設備是通過 陀螺儀和加速計來區別這兩者的.
通過DeviceMotion對設備運動狀態的判斷，則可以幫助我們在網頁上就實現“搖一搖”的交互效果。

if ((window.DeviceMotionEvent) {
window.addEventListener(‘devicemotion’, deviceMotionHandler, false);
} else {
alert（“Not supported on your device.”）
}

捕捉重力加速度
accelerationIncludingGravity屬性返回設備的加速度記錄，是由用戶引起的設備的加速度和由重力加速度的總和。

是一個包括三軸（x、y、z）加速度信息的對象，每個軸都有自己的屬性：
x:表示x軸（西到東）上的加速度
y:表示y軸（南到北）上的加速度
z:表示z軸（下到上）上的加速度

var acceleration = event.accelerationIncludingGravity;

手機震動
在window.navigator對象裏就只有一個關於振動的API：vibrate

這個navigator.vibrate函數可以接受一個數字參數，也可以接受一個數字數組，當使用數組參數時，奇數位的數值是震動秒數，偶數位爲等待秒數。

// 振動2秒
if (navigator.vibrate) {
navigator.vibrate(2000);
} else if (navigator.webkitVibrate) {
navigator.webkitVibrate(2000);
}
// 振動多次
// 參數分別是震動3秒，等待2秒，然後振動1秒
navigator.vibrate([3000, 2000, 1000]);

// 停止振動
navigator.vibrate(0);
navigator.vibrate([]);
實例

if(window.DeviceMotionEvent) {
var speed = 30; // 用來判定的加速度閾值，太大了則很難觸發
var x, y, z, lastX, lastY, lastZ;
x = y = z = lastX = lastY = lastZ = 0;
window.addEventListener(‘devicemotion’, function(event){
var acceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
if(navigator.vibrate) {
navigator.vibrate(500)
}
alert(“搖一搖成功”);
}
lastX = x;
lastY = y;
}, false);
}

作者：Li_na_na01
原文：https://blog.csdn.net/Li_na_na01/article/details/87809093