Signatur
Beschreibung
Die Eigenschaft gamma eines DeviceMotionEventRotationRate-Objekts gibt an, wie schnell sich das Gerät um seine Y-Achse dreht, also die Achse, die bei Hochformat-Haltung von unten nach oben durch das Display verläuft. Der Wert kommt vom Gyroskop und wird in Grad pro Sekunde (°/s) angegeben. Positive Werte bedeuten nach der Rechte-Hand-Regel eine Drehung gegen den Uhrzeigersinn, wenn man von der positiven Y-Achse aus auf das Gerät schaut. Praktisch heißt das: Das Gerät wird seitlich nach links oder rechts gekippt.
Das Objekt bekommt man über event.rotationRate im devicemotion-Event. Neben gamma hat es die Eigenschaften alpha (Z-Achse) und beta (X-Achse). Anders als DeviceOrientationEvent.gamma, das einen Winkel in Grad liefert, beschreibt rotationRate.gamma eine Winkelgeschwindigkeit, also wie schnell sich die Lage gerade ändert.
Typische Einsatzzwecke sind Gestenerkennung (z. B. „Handy schnell seitlich drehen“), Steuerung in Spielen, Stabilisierung von Animationen und Bewegungsanalyse. Der Wert ist null, wenn das Gerät kein Gyroskop hat oder der Browser keine Rotationsdaten liefert.
Rückgabewert
null, wenn kein Wert verfügbar ist.Beispiele
Rotationsrate um die Y-Achse auslesen
const handleMotion = (event) => {
const rate = event.rotationRate;
if (rate && rate.gamma !== null) {
console.log(`Gamma: ${rate.gamma.toFixed(2)} °/s`);
} else {
console.log('Kein Gyroskop verfügbar');
}
};
window.addEventListener('devicemotion', handleMotion);Berechtigung auf iOS anfragen (per Button-Klick)
const button = document.querySelector('#start');
button.addEventListener('click', async () => {
// iOS 13+ verlangt eine ausdrückliche Erlaubnis
if (typeof DeviceMotionEvent.requestPermission === 'function') {
const state = await DeviceMotionEvent.requestPermission();
if (state !== 'granted') {
console.warn('Bewegungssensor-Zugriff verweigert');
return;
}
}
window.addEventListener('devicemotion', (e) => {
const gamma = e.rotationRate?.gamma ?? 0;
document.querySelector('#out').textContent = `${gamma.toFixed(1)} °/s`;
});
});Seitliche Dreh-Geste erkennen
const THRESHOLD = 200; // °/s
const COOLDOWN = 800; // ms
let lastTrigger = 0;
const onMotion = (event) => {
const gamma = event.rotationRate?.gamma;
if (gamma == null) return;
const now = performance.now();
if (Math.abs(gamma) > THRESHOLD && now - lastTrigger > COOLDOWN) {
lastTrigger = now;
const richtung = gamma > 0 ? 'links' : 'rechts';
console.log(`Dreh-Geste nach ${richtung} erkannt`);
}
};
window.addEventListener('devicemotion', onMotion);
// Aufräumen, z. B. beim Verlassen der Ansicht:
// window.removeEventListener('devicemotion', onMotion);// Wichtig · Fallstricke
- Einheit: Laut Spezifikation Grad pro Sekunde. Ältere Chrome-Versionen für Android (vor Chrome 66) lieferten fälschlich Radiant pro Sekunde. Bei Bedarf Werte auf ihre Plausibilität prüfen.
- Nur in sicherem Kontext:
devicemotion-Events werden nur über HTTPS ausgelöst. Auf iOS 13+ braucht man außerdemDeviceMotionEvent.requestPermission(), und dieser Aufruf muss durch eine Nutzeraktion ausgelöst werden. - Permissions Policy: In iframes muss der Zugriff mit
allow="accelerometer; gyroscope"freigegeben sein. nullprüfen: Auf Desktop-Geräten ohne Gyroskop istrotationRateodergammaoftnull. Mit?.und??absichern.- Performance: Das Event kommt sehr häufig (oft mit 60 Hz oder mehr). Aufwändige Berechnungen oder DOM-Änderungen besser drosseln oder mit
requestAnimationFramebündeln. - Datenschutz: Bewegungssensoren können für Fingerprinting missbraucht werden. Einige Browser runden die Werte oder schränken die Abtastrate deshalb ein.
- Die Achsen hängen am Gerät, nicht an der Bildschirmausrichtung. Im Querformat sind X und Y aus Sicht der Nutzerin oder des Nutzers vertauscht.