Плавные значения параметров устройства

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; в свой логотип. Это заставит браузер плавно перейти от одного состояния преобразования к другому.

Возможно, вам придется немного поэкспериментировать с этой настройкой; и вам, возможно, придется реализовать собственное сглаживание (в JavaScript, используя JavaScript-based animation), если вас не устраивают результаты перехода CSS.