GSAP - Перетаскиваемый поворот не является точным или непротиворечивым

Question

Я использую Greenscok Draggable в качестве текстового редактора. Температура увеличивается или уменьшается при каждом повороте на 18 градусов (также по часовой стрелке или против часовой стрелки).

Я захватываю вращение и используя оператор остатка (%), и если он равен 0, температура изменяется.

С помощью циферблата при 0 (вращение) температура составляет 18 и при -180 (вращение), циферблат должен достигать 26 градусов. Однако это постоянно меняется в зависимости от того, насколько быстро перемещается циферблат.

Чтобы добавить, температура должна быть 22 градусов при -90 (вращение).

Вот jsbin о том, насколько у меня - http://jsbin.com/wanoraputa/edit?html,js,output

Спасибо.

Answer 1

Вот ответ, который был предоставлен мне на форуме Greensock.

console.clear(); 
var output = document.getElementById('output'); 
var temp = document.getElementById('temperature'); 
var previousRotation = 0; 


//from Blake 
function normalize(value, min, max) { 
    return (value - min)/(max - min); 
} 


//from Chrysto 
function percentToRange(percent, min, max) { 
    return((max - min) * percent + min); 
} 


Draggable.create('#dial', { 
    type:'rotation', 
    throwProps: true, 
    bounds: { 
     minRotation: 0, 
     maxRotation: -180 
    }, 
    onDrag: function(){ 
     var normalized = normalize(this.rotation, 0, -180); 
     var mapped = percentToRange(normalized, 18, 26); 
     console.log(this.rotation, normalized, mapped, this.getDirection()); 
     temp.innerHTML = parseInt(mapped); 
    } 
}); 

http://codepen.io/GreenSock/pen/ALNzJz?editors=0011