JS获取旋转元素当前旋转角度

835 阅读1分钟

封装一个函数

    function getRotationDegrees(element) {
      var style = window.getComputedStyle(element);
      var transformString = style['-webkit-transform']
        || style['-moz-transform']
        || style['transform'];
      if (!transformString || transformString == 'none')
        return 0;
      var splits = transformString.split(',');
      var parenLoc = splits[0].indexOf('(');
      var a = parseFloat(splits[0].substr(parenLoc + 1));
      var b = parseFloat(splits[1]);
      var rad = Math.atan2(b, a);
      var deg = 180 * rad / Math.PI;
      if (deg < 0) deg += 360;
      console.log('deg', deg);
      return deg;
    }

代码:

  <div id="aa">一个一个</div>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: red;
      margin: 300px;

    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    #aa {
      animation: spin 5s linear infinite;
      animation-fill-mode: forwards;
    }

    #aa:hover {
      animation-play-state: paused;
    }
    </style>
  <script>
    function getRotationDegrees(element) {
      var style = window.getComputedStyle(element);
      var transformString = style['-webkit-transform']
        || style['-moz-transform']
        || style['transform'];
      if (!transformString || transformString == 'none')
        return 0;
      var splits = transformString.split(',');
      var parenLoc = splits[0].indexOf('(');
      var a = parseFloat(splits[0].substr(parenLoc + 1));
      var b = parseFloat(splits[1]);
      var rad = Math.atan2(b, a);
      var deg = 180 * rad / Math.PI;
      if (deg < 0) deg += 360;
      console.log('deg', deg);
      return deg;
    }
    let aa = document.getElementById("aa")
    aa.onmousemove = function () {
      getRotationDegrees(aa)
    }
  </script>

在vue项目中使用该方法需要用到addEventListener,并且getRotationDegrees函数要放在addEventListener内部执行