html5重力感應事件之DeviceMotionEvent

2017-03-24 1454 6 編輯:深圳網站建設 來源:互聯網

今天主要介紹一下html5重力感應事件之DeviceMotionEvent,主要介紹一下html5自帶的事件,不過,這個事件是新的事件,關于文檔請看:http://w3c.github.io/deviceorientation/spec-source-orientation.html

事件介紹

html5重力感應事件之DeviceMotionEvent.jpg

1、deviceorientation 提供設備的物理方向信息,表示為一系列本地坐標系的旋角。

2、devicemotion 提供設備的加速信息,表示為定義在設備上的坐標系中的卡爾迪坐標。其還提供了設備在坐標系中的自轉速率。若可行的話,事件應該提供設備重心處的加速信息。

3、compassneedscalibration 用于通知Web站點使用羅盤信息校準上述事件。

用法簡介

注冊一個deviceorientation事件的接收器:

  window.addEventListener("deviceorientation", function(event) {

      // 處理event.alpha、event.beta及event.gamma

  }, true);

將設備放置在水平表面,屏幕頂端指向西方,則其方向信息如下:

  {alpha: 90,

   beta: 0,

   gamma: 0};

為了獲得羅盤指向,可以簡單的使用360度減去alpha。若設被平行于水平表面,其羅盤指向為(360 - alpha)。 若用戶手持設備,屏幕處于一個垂直平面且屏幕頂端指向上方。beta的值為90,alpha和gamma無關。 用戶手持設備,面向alpha角度,屏幕處于一個垂直屏幕,屏幕頂端指向右方,則其方向信息如下:

  {alpha: 270 - alpha,

   beta: 0,

   gamma: 90};

只用自定義界面通知用戶校準羅盤:

 window.addEventListener("compassneedscalibration", function(event) {

      alert('您的羅盤需要校準,請將設備沿數字8方向移動。');

      event.preventDefault();

  }, true);

注冊一個devicemotion時間的接收器:

 window.addEventListener("devicemotion", function(event) {

      // 處理event.acceleration、event.accelerationIncludingGravity、

      // event.rotationRate和event.interval

  }, true);

將設備放置在水平表面,屏幕向上,acceleration為零,則其accelerationIncludingGravity信息如下:

  {x: 0,

   y: 0,

   z: 9.81};

設備做自由落體,屏幕水平向上,accelerationIncludingGravity為零,則其acceleration信息如下:

  {x: 0,

   y: 0,

   z: -9.81};

將設備安置于車輛至上,屏幕處于一個垂直平面,頂端向上,面向車輛后部。車輛行駛速度為v,向右側進行半徑為r的轉彎。設備記錄acceleration和accelerationIncludingGravity在位置x處的情況,同時設備還會記錄rotationRate.gamma的負值:

  {acceleration: {x: v^2/r, y: 0, z: 0},

   accelerationIncludingGravity: {x: v^2/r, y: 0, z: 9.81},

   rotationRate: {alpha: 0, beta: 0, gamma: -v/r*180/pi} };

應用案例

if (window.DeviceMotionEvent) { 

                 window.addEventListener('devicemotion',deviceMotionHandler, false);  

        } 

        var speed = 30;//speed

        var x = y = z = lastX = lastY = lastZ = 0;

        function deviceMotionHandler(eventData) {  

          var acceleration =eventData.accelerationIncludingGravity;

                x = acceleration.x;

                y = acceleration.y;

                z = acceleration.z;

                if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {

                    //簡單的搖一搖觸發代碼

                    alert(1);

                }

                lastX = x;

                lastY = y;

                lastZ = z;

        }

專業的網站建設公司,深正互聯,如您有網站營銷需求,請您關注我們,或者致電13828884598

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾 搜狐资讯下截能赚钱呀 女团赚钱方式 贵州神奇麻将下载 网上每天赚钱 摄影赚钱还是电商赚钱 红警秘籍 潼关肉夹馍赚钱吗 红8彩票群 看抖音怎么赚钱的 决战麻将卡五星安卓版 王者荣耀怎么打单赚钱 网络授课直播平台怎么赚钱 安卓2.2捕鸟达人 在温州开小超市赚钱吗 彩世界首页 彩票怎么赚钱投诉