js携帯電話の揺れと振動機能を実現
1928 ワード
イベントリスニング
DeviceMotion,html 5が提供する新しいDOMイベントは,デバイス上の座標系に定義されたカルディ座標として表されるデバイスの加速情報を提供する.座標系におけるデバイスの自転速度も提供する.
DeviceMotionEventは、デバイスに意味のあるウォブル(またはモーション)が発生するときに発生する.イベントオブジェクトは、発生するピッチ値、回転率、およびデバイス加速度をカプセル化する.加速度の算出方式は、重力とユーザが生成する2つの加速度ベクトルの和である.装置はジャイロと加速計によって両者を区別する.デバイスの動作状態をDeviceMotionで判断することで、Webページで「揺れる」インタラクティブな効果を実現することができます.
重力加速度のスナップ(Snap Gravity Accel)
accelerationIncludingGravityプロパティは、ユーザによるデバイスの加速度と重力加速度の合計であるデバイスの加速度レコードを返します.
3軸(x、y、z)の加速度情報を含むオブジェクトで、各軸には独自のプロパティがあります.
x:x軸(西から東)の加速度を表す
y:y軸(南から北)の加速度を表す
携帯が震える
Windowsでnavigatorオブジェクトには振動に関するAPI:vibrateが1つしかありません
これはvibrate関数は、数値パラメータを受け入れるか、数値配列を受け入れることができ、配列パラメータを使用する場合、奇数ビットの数値は振動秒数、偶数ビットは待機秒数である.
≪インスタンス|Instance|emdw≫
テストは有効です!
DeviceMotion,html 5が提供する新しいDOMイベントは,デバイス上の座標系に定義されたカルディ座標として表されるデバイスの加速情報を提供する.座標系におけるデバイスの自転速度も提供する.
DeviceMotionEventは、デバイスに意味のあるウォブル(またはモーション)が発生するときに発生する.イベントオブジェクトは、発生するピッチ値、回転率、およびデバイス加速度をカプセル化する.加速度の算出方式は、重力とユーザが生成する2つの加速度ベクトルの和である.装置はジャイロと加速計によって両者を区別する.デバイスの動作状態をDeviceMotionで判断することで、Webページで「揺れる」インタラクティブな効果を実現することができます.
if ((window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert("Not supported on your device.")
}
重力加速度のスナップ(Snap Gravity Accel)
accelerationIncludingGravityプロパティは、ユーザによるデバイスの加速度と重力加速度の合計であるデバイスの加速度レコードを返します.
3軸(x、y、z)の加速度情報を含むオブジェクトで、各軸には独自のプロパティがあります.
x:x軸(西から東)の加速度を表す
y:y軸(南から北)の加速度を表す
z
:z軸(下から上)の加速度を表すvar acceleration = event.accelerationIncludingGravity;
携帯が震える
Windowsでnavigatorオブジェクトには振動に関するAPI:vibrateが1つしかありません
これは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([]);
≪インスタンス|Instance|emdw≫
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);
}
テストは有効です!