Smooth DeviceOrientation值

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）。