DeviceMotionEventRotationRate.alpha — Eigenschaft · JavaScript-Referenz

Signatur

DeviceMotionEventRotationRate.alpha

Beschreibung

Die schreibgeschützte Eigenschaft alpha eines DeviceMotionEventRotationRate-Objekts gibt an, wie schnell sich das Gerät um seine Z-Achse dreht. Die Z-Achse steht senkrecht auf dem Bildschirm und zeigt zum Betrachter. Eine Drehung um diese Achse ist also so, als würde man ein flach auf dem Tisch liegendes Smartphone wie einen Kreisel drehen.

Das Objekt bekommt man über event.rotationRate im devicemotion-Ereignis, das auf window ausgelöst wird. Der Wert kommt vom Gyroskop und wird in Grad pro Sekunde (°/s) angegeben. Positive und negative Werte stehen für die beiden Drehrichtungen; nach der Rechte-Hand-Regel bedeutet ein positiver Wert eine Drehung gegen den Uhrzeigersinn, wenn man von oben auf den Bildschirm schaut.

Typische Einsatzfälle sind Gestenerkennung (z. B. „Handy drehen“), Spielsteuerungen, Stabilisierung von Anzeigen oder die Aufzeichnung von Bewegungsdaten. Soll die absolute Ausrichtung statt der Drehgeschwindigkeit ausgewertet werden, ist DeviceOrientationEvent.alpha die richtige Wahl.

Rückgabewert

Typ

number | null

Beschreibung

Rotationsrate um die Z-Achse in Grad pro Sekunde (°/s). null, wenn das Gerät kein Gyroskop hat oder der Wert nicht zur Verfügung steht.

Beispiele

Rotationsrate um die Z-Achse auslesen

const handleMotion = (event) => {
  const rate = event.rotationRate;
  if (rate?.alpha == null) {
    console.log('Keine Gyroskop-Daten verfügbar');
    return;
  }
  console.log(`Z-Rotation: ${rate.alpha.toFixed(1)} °/s`);
};

window.addEventListener('devicemotion', handleMotion);

Z-Rotation: 12.4 °/s

Berechtigung auf iOS anfragen und dann lauschen

const startButton = document.querySelector('#start');

startButton.addEventListener('click', async () => {
  // iOS 13+ verlangt eine explizite Freigabe durch eine Nutzeraktion
  if (typeof DeviceMotionEvent?.requestPermission === 'function') {
    const state = await DeviceMotionEvent.requestPermission();
    if (state !== 'granted') {
      console.log('Zugriff auf Bewegungssensoren verweigert');
      return;
    }
  }
  window.addEventListener('devicemotion', (e) => {
    console.log('alpha:', e.rotationRate?.alpha);
  });
});

alpha: -3.27

Schnelle Drehgeste erkennen

const THRESHOLD = 300; // °/s
let lastTrigger = 0;

const detectSpin = (event) => {
  const alpha = event.rotationRate?.alpha ?? 0;
  const now = performance.now();
  // Entprellen: höchstens eine Auslösung pro Sekunde
  if (Math.abs(alpha) > THRESHOLD && now - lastTrigger > 1000) {
    lastTrigger = now;
    console.log(alpha > 0 ? 'Drehung gegen den Uhrzeigersinn' : 'Drehung im Uhrzeigersinn');
  }
};

window.addEventListener('devicemotion', detectSpin);

// Später wieder abmelden, um Akku zu sparen
setTimeout(() => window.removeEventListener('devicemotion', detectSpin), 30000);

Drehung gegen den Uhrzeigersinn

// Wichtig · Fallstricke

Sicherer Kontext: devicemotion wird nur über HTTPS (oder localhost) ausgelöst.
iOS/Safari: Ab iOS 13 muss DeviceMotionEvent.requestPermission() innerhalb einer Nutzeraktion (z. B. Klick) aufgerufen werden, sonst kommen keine Ereignisse an.
Desktop: Viele Desktop-Geräte haben kein Gyroskop; dann ist alpha null oder das Ereignis wird gar nicht ausgelöst. Immer auf null prüfen.
Einheiten: Laut Spezifikation Grad pro Sekunde. Ältere Implementierungen (z. B. frühe Chrome-Versionen auf Android) lieferten teils Radiant pro Sekunde, bei Altgeräten also Plausibilität prüfen.
Nicht verwechseln: DeviceOrientationEvent.alpha ist ein Winkel (0–360°), hier dagegen eine Winkelgeschwindigkeit.
Performance/Datenschutz: Das Ereignis feuert mit hoher Frequenz (siehe event.interval); rechenintensive Handler drosseln und nicht mehr benötigte Listener entfernen. Sensordaten können zum Fingerprinting missbraucht werden, deshalb schränken Browser den Zugriff teils per Permissions-Policy (accelerometer, gyroscope) ein, besonders in iframes.

Siehe auch

DeviceMotionEventAcceleration.y DeviceMotionEventRotationRate.beta DeviceMotionEventRotationRate.gamma DeviceMotionEvent.rotationRate DeviceMotionEvent.interval