HTML5 は DeviceOrientation を使用してシェイク function_jquery を実装します

HTML5 には、DeviceOrientation という重要な機能があり、基礎となる方向センサーやモーション センサーの高度なカプセル化を提供し、重力感知やコンパスなどの興味深い機能を簡単に実装できます。この記事では、例を使用して、HTML5 の重力センサーと方向センサーを使用して、携帯電話を振る効果を実現する方法を紹介します。

DeviceOrientation には 2 つのイベントが含まれます:

1. deviceOrientation: 方位センサーデータをカプセル化し、携帯電話の角度、向き、方位など、携帯電話が静止しているときの方向データを取得できるイベント。
2. deviceMotion: モーション センサー データをカプセル化し、携帯電話が動いているときにモーション加速度などのデータを取得できるイベント。

HTML

ページには手振れ画像を配置するために使用される div#hand があり、振った後の結果情報を表示するために使用される div#result が使用されます。

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

CSS3 を使用してページ効果を強化し、-webkit-animation アニメーション効果を使用して手回し画像のダイナミックな効果を実現できます。詳細を確認するには、ソース コードをダウンロードしてください。

JavaScript

「振る」という行為は「一定時間内にデバイスが一定距離を移動する」ことを意味しますので、一定時間範囲内でのx、y、z軸の値の変化率は次のようになります。デバイスモーションを通じてデバイスの揺れを監視することは、デバイスが揺れているかどうかを判断することです。正常な動作の誤判定を防ぐためには、変化率に適切な臨界値を設定する必要がある。
HTML5 用にカプセル化されたshake.js コードを使用してデバイスのシェイクを決定します。プロジェクト アドレス: https://github.com/alexgibson/shake.js。

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

最初に Shake をインスタンス化し、次にデバイスの動きの監視を開始し、デバイスの動きを監視して、監視結果をコールバックします (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); 
  } 
}; 

ここでは、shakeEventDidOccur() 関数をカスタマイズできます。この例では、シェイクされた結果が返され、ページに表示されます。デモをご覧ください。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。