H5 设备方向及运动API

传送门：https://blog.csdn.net/Panda_m/article/details/57515195

入门的demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Vue -->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <style>
      b { font-size: 24px; }
    </style>
    <body>
       <div id="app">
          <p>alpha(z): 手机在水平面上旋转的角度，当设备的顶部指向正北时其值为 0°。 当设备逆时针旋转时值增加。【0 -360】: <b>{{ alpha }}</b></p>
          <p>beta(x): 围绕x轴上下翻转的角度，当设备的顶部和底部与地球表面等距时其值为 0。【向上翻为负值，-180 - 180】: <b>{{ beta }}</b></p>
          <p>gamma(y): 围绕y轴左右翻转的角度，当设备的左侧和右侧与地球表面等距时 其值为 0。【向左翻为负值， -180 - 180】: <b>{{ gamma }}</b></p>
       </div>
    </body>
    <script>
      var vue = new Vue({
          el: '#app',
          data: {
              alpha: "",
              beta: "",
              gamma: "",
          },
          beforeMount: function () {
              window.addEventListener('deviceorientation', (orientData) => {
                  this.alpha = orientData.alpha || 'null';
                  this.beta =  orientData.beta || 'null';
                  this.gamma = orientData.gamma || 'null';
              });
          }
      })
    </script>
</html>

展示效果：

节流版demo（强烈推荐）：

事件触发的太快，频繁的触发函数与界面渲染太浪费性能，这里我演示函数节流，参数为1000ms

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Vue -->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <style>
      b { font-size: 24px; }
    </style>
    <body>
       <div id="app">
          <p>alpha(z): 手机在水平面上旋转的角度，当设备的顶部指向正北时其值为 0°。 当设备逆时针旋转时值增加。【0 -360】: <b>{{ alpha }}</b></p>
          <p>beta(x): 围绕x轴上下翻转的角度，当设备的顶部和底部与地球表面等距时其值为 0。【向上翻为负值，-180 - 180】: <b>{{ beta }}</b></p>
          <p>gamma(y): 围绕y轴左右翻转的角度，当设备的左侧和右侧与地球表面等距时 其值为 0。【向左翻为负值， -180 - 180】: <b>{{ gamma }}</b></p>
       </div>
    </body>
    <script>
      // 函数节流（throttle）
      var throttle = function(func, wait, options) {
          var timeout, context, args, result;
          // 标记时间戳
          var previous = 0;
          // options可选属性 leading: true/false 表示第一次事件马上触发回调/等待wait时间后触发
          // options可选属性 trailing: true/false 表示最后一次回调触发/最后一次回调不触发
          if (!options) options = {};

          var later = function() {
            previous = options.leading === false ? 0 : +(new Date());
            timeout = null;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
          };

          var throttled = function() {
            // 记录当前时间戳
            var now = +(new Date());
            // 如果是第一次触发且选项设置不立即执行回调
            if (!previous && options.leading === false)
            // 将记录的上次执行的时间戳置为当前
            previous = now;
            // 距离下次触发回调还需等待的时间
            var remaining = wait - (now - previous);
            context = this;
            args = arguments;

            // 等待时间 <= 0或者不科学地 > wait（异常情况）
            if (remaining <= 0 || remaining > wait) {
              if (timeout) {
                  // 清除定时器
                clearTimeout(timeout);
                // 解除引用
                timeout = null;
              }
              // 将记录的上次执行的时间戳置为当前
              previous = now;

              // 触发回调
              result = func.apply(context, args);
              if (!timeout) context = args = null;
            }
            // 在定时器不存在且选项设置最后一次触发需要执行回调的情况下
            // 设置定时器，间隔remaining时间后执行later
            else if (!timeout && options.trailing !== false)    {
              timeout = setTimeout(later, remaining);
            }
           return result;
          };

          throttled.cancel = function() {
            clearTimeout(timeout);
            previous = 0;
            timeout = context = args = null;
          };

          return throttled;
      };

      var vue = new Vue({
          el: '#app',
          data: {
              alpha: "",
              beta: "",
              gamma: "",
          },
          methods: {
            render (orientData) {
                this.alpha = orientData.alpha || 'null';
                this.beta =  orientData.beta || 'null';
                this.gamma = orientData.gamma || 'null';
            }
          },
          beforeMount: function () {
              const throttle_render = throttle(this.render, 1000);
              window.addEventListener('deviceorientation', throttle_render);
          }
      })
    </script>
</html>

展示效果：