平滑设备方向值

Question

我正在尝试根据设备方向移动图像。但是这些值在静止时非常跳跃，在 -1 到 +2 之间没有移动，我需要一种方法来使其平滑一点。

有没有一种简单的方法可以通过平均或其他方法来减少这种紧张？

 init();
    var count = 0;

    function init() {
      if (window.DeviceOrientationEvent) {


        window.addEventListener('deviceorientation', function(eventData) {
          // gamma is the left-to-right tilt in degrees, where right is positive
          var tiltLR = eventData.gamma;

          // beta is the front-to-back tilt in degrees, where front is positive
          var tiltFB = eventData.beta;

          // alpha is the compass direction the device is facing in degrees
          var dir = eventData.alpha

          // call our orientation event handler
          deviceOrientationHandler(tiltLR, tiltFB, dir);
          }, false);
      } 
    }

    function deviceOrientationHandler(tiltLR, tiltFB, dir) {

      var logo = document.getElementById("imgLogo");
      logo.style.webkitTransform = "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
      logo.style.MozTransform = "rotate("+ tiltLR +"deg)";
      logo.style.transform = "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
    }

http://codepen.io/picard102/pen/zvOVLx

Answer 1

使用CSS transitions 平滑设置CSS 值。

您可以尝试将transition: all 0.5s;-webkit-transition: all 0.5s; 添加到您的徽标中。这将导致浏览器从一个转换状态平滑过渡到下一个转换状态。

您可能需要对该设置进行一些试验；如果您对 CSS 转换的结果不满意，您可能不得不实现自己的平滑（在 JavaScript 中，使用 JavaScript-based animation）。