Javascript 平滑设备定向值

我正在尝试根据设备方向移动图像。但在静止状态下，数值非常波动，在-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)";
    }

用于平滑设置CSS值。

您可以尝试添加

transition:all 0.5s-webkit过渡：所有0.5s到您的徽标。这将导致浏览器从一个变换状态平滑过渡到下一个变换状态

您可能需要尝试一下这种设置；如果您对CSS转换的结果不满意，您可能必须实现自己的平滑（在JavaScript中，使用）。是的，我尝试使用转换来平滑它，但是设备值快速传入所产生的噪音是一个真正的难题。粉丝们几乎马上就开始了。你在用什么设备？我以为你在用手机。Fwiw，您可以存储接收到的事件的值，并且仅每秒更新30或60帧，并平滑这些值（您必须自己实现）。Chrome桌面MacBook。在iPhone上也会得到类似的结果。你可能想搜索游戏编程主题，比如控制器输入值的平滑；可能有现成的可用算法/库。（从数学上讲，您正在寻找移动平均线的指数平滑：）