DeviceMotionEventAcceleration.y — Eigenschaft · JavaScript-Referenz

Signatur

DeviceMotionEventAcceleration.y

Beschreibung

Die Eigenschaft y eines DeviceMotionEventAcceleration-Objekts enthält die gemessene Beschleunigung entlang der Y-Achse in Metern pro Sekunde zum Quadrat (m/s²). Die Y-Achse verläuft in der natürlichen Ausrichtung des Geräts (bei Smartphones: Hochformat) von unten nach oben über den Bildschirm. Positive Werte bedeuten eine Beschleunigung in Richtung Oberkante des Geräts.

Du bekommst das Objekt über das devicemotion-Ereignis, und zwar in zwei Varianten:

event.acceleration – Beschleunigung ohne Erdanziehung (lineare Beschleunigung, benötigt ein Gyroskop bzw. Sensorfusion).
event.accelerationIncludingGravity – Beschleunigung inklusive Erdanziehung. Hält man ein Smartphone aufrecht, liegt y hier bei etwa 9.81.

Typische Einsatzzwecke sind Schüttel-Erkennung, einfache Neigungssteuerung in Spielen, Schrittzähler-Prototypen oder das Erkennen, ob ein Gerät aufrecht gehalten wird. Für präzise Orientierungsdaten ist dagegen DeviceOrientationEvent oder die Generic Sensor API (Accelerometer) besser geeignet.

Rückgabewert

Typ

number | null

Beschreibung

Beschleunigung entlang der Y-Achse in m/s² als Gleitkommazahl, oder null, wenn das Gerät bzw. der Browser den Wert nicht liefern kann.

Beispiele

Y-Beschleunigung mit und ohne Schwerkraft auslesen

const handleMotion = (event) => {
  const linearY = event.acceleration?.y;
  const gravityY = event.accelerationIncludingGravity?.y;

  console.log(`Linear: ${linearY?.toFixed(2) ?? 'n/a'} m/s²`);
  console.log(`Inkl. Schwerkraft: ${gravityY?.toFixed(2) ?? 'n/a'} m/s²`);
};

window.addEventListener('devicemotion', handleMotion);

Linear: 0.03 m/s² Inkl. Schwerkraft: 9.79 m/s²

Berechtigung auf iOS anfragen und Listener starten

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

const onMotion = (event) => {
  const y = event.accelerationIncludingGravity?.y;
  if (y == null) return;
  document.querySelector('#out').textContent = `Y: ${y.toFixed(2)} m/s²`;
};

startButton.addEventListener('click', async () => {
  // iOS 13+ verlangt eine explizite Zustimmung per Nutzergeste
  if (typeof DeviceMotionEvent?.requestPermission === 'function') {
    const state = await DeviceMotionEvent.requestPermission();
    if (state !== 'granted') {
      console.warn('Bewegungssensor-Zugriff verweigert');
      return;
    }
  }
  window.addEventListener('devicemotion', onMotion);
});

Hochformat-Haltung erkennen und Auf-/Ab-Schütteln zählen

let shakes = 0;
let lastShake = 0;
const THRESHOLD = 12; // m/s², lineare Beschleunigung

window.addEventListener('devicemotion', (event) => {
  const g = event.accelerationIncludingGravity?.y ?? 0;
  const upright = g > 7; // Gerät wird grob aufrecht gehalten

  const y = event.acceleration?.y;
  const now = performance.now();
  if (y != null && Math.abs(y) > THRESHOLD && now - lastShake > 300) {
    lastShake = now;
    shakes += 1;
    console.log(`Schüttler #${shakes} (aufrecht: ${upright})`);
  }
});

Schüttler #1 (aufrecht: true) Schüttler #2 (aufrecht: true)

// Wichtig · Fallstricke

Wert kann null sein: Besonders event.acceleration ist auf Geräten ohne Gyroskop oft null – prüfe mit ?. bzw. == null, bevor du rechnest.
Nur in sicheren Kontexten: Das Ereignis wird nur über HTTPS (oder localhost) ausgelöst. In iframes ist ggf. die Permissions-Policy accelerometer nötig.
iOS/Safari: Ab iOS 13 muss DeviceMotionEvent.requestPermission() innerhalb einer Nutzergeste (z. B. Klick) aufgerufen werden, sonst kommen keine Ereignisse.
Achsen folgen dem Gerät, nicht dem Bildschirm: Dreht sich die Anzeige ins Querformat, bleibt die Y-Achse an der Gerätegeometrie ausgerichtet. Für bildschirmbezogene Werte musst du screen.orientation.angle berücksichtigen.
Vorzeichen-Unterschiede: Ältere Android-Browser lieferten teils invertierte Vorzeichen bei accelerationIncludingGravity – auf Zielgeräten testen.
Rauschen und Frequenz: Die Werte sind verrauscht und kommen mit hoher Rate (siehe event.interval). Glätte sie (z. B. gleitender Mittelwert) und vermeide teure DOM-Operationen pro Ereignis; nutze ggf. requestAnimationFrame.
Datenschutz: Bewegungssensoren können für Fingerprinting missbraucht werden; Browser reduzieren daher mitunter Präzision oder Abtastrate.

Siehe auch

DeviceMotionEventAcceleration.x DeviceMotionEventAcceleration.z DeviceMotionEvent.acceleration DeviceMotionEvent.rotationRate DeviceMotionEvent.interval