HTML5 verwendet DeviceOrientation, um die Shake-Funktion_jquery zu implementieren

HTML5 verfügt über eine wichtige Funktion: DeviceOrientation, die eine erweiterte Kapselung der zugrunde liegenden Richtungs- und Bewegungssensoren ermöglicht. Sie ermöglicht uns die einfache Implementierung interessanter Funktionen wie Schwerkrafterkennung und Kompass. In diesem Artikel wird anhand von Beispielen erläutert, wie Sie mithilfe der Schwerkraftbewegungs- und Richtungssensoren von HTML5 den Effekt erzielen, Ihr Telefon zu schütteln.

DeviceOrientation umfasst zwei Ereignisse:

1. Geräteorientierung: Ein Ereignis, das die Orientierungssensordaten kapselt und die Orientierungsdaten des Mobiltelefons abrufen kann, wenn es stationär ist, z. B. den Winkel, die Ausrichtung, die Ausrichtung usw. des Mobiltelefons.
2. deviceMotion: Ein Ereignis, das Bewegungssensordaten kapselt und Daten wie die Bewegungsbeschleunigung abrufen kann, wenn das Mobiltelefon in Bewegung ist.

HTML

Auf der Seite gibt es eine div#hand, die zum Platzieren eines Handshake-Bildes verwendet wird, und div#result wird verwendet, um die Ergebnisinformationen nach dem Schütteln anzuzeigen.

<div id="hand" class="hand hand-animate"></div> 
<div id="result"></div> 

Wir können CSS3 verwenden, um den Seiteneffekt zu verbessern, und den Animationseffekt -webkit-animation verwenden, um den dynamischen Effekt handgekurbelter Bilder zu erzielen. Bitte laden Sie den Quellcode herunter, um die Details anzuzeigen.

Javascript

Die Aktion „Schütteln“ bedeutet „das Gerät bewegt sich innerhalb eines bestimmten Zeitraums um eine bestimmte Distanz.“ Daher wird die Änderungsrate der x-, y- und z-Achsenwerte innerhalb eines bestimmten Zeitbereichs ermittelt Die Überwachung der Erschütterungen des Geräts durch DeviceMotion dient dazu, festzustellen, ob das Gerät erschüttert wird. Um eine Fehleinschätzung der normalen Bewegung zu verhindern, muss ein geeigneter kritischer Wert für die Änderungsrate festgelegt werden.
Wir verwenden den gekapselten shake.js-Code für HTML5, um Gerätewackeln zu bestimmen, Projektadresse: https://github.com/alexgibson/shake.js.

<script src="shake.js"></script> 

Instanziieren Sie zuerst Shake, beginnen Sie dann mit der Überwachung der Gerätebewegung, überwachen Sie die Gerätebewegung und rufen Sie das Überwachungsergebnis zurück: shakeEventDidOccur.

window.onload = function() { 
  var myShakeEvent = new Shake({ 
    threshold: 15 
  }); 
 
  myShakeEvent.start(); 
 
  window.addEventListener('shake', shakeEventDidOccur, false); 
 
  function shakeEventDidOccur () { 
    var result = document.getElementById("result"); 
    result.className = "result"; 
    var arr = ['妹子一枚','福利图片一套','码农笔记一本','土豪金一台']; 
    var num = Math.floor(Math.random()*4); 
    result.innerHTML = "恭喜，摇得"+arr[num]+"！"; 
    setTimeout(function(){ 
      result.className = "result result-show"; 
    }, 1000); 
  } 
}; 

Hier kann die Funktion shakeEventDidOccur() angepasst werden. In diesem Beispiel wird das geschüttelte Ergebnis zurückgegeben und auf der Seite angezeigt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.