GSAP - 可拖动的旋转不准确或不一致

Question

我使用Greenscok Draggable作为调整器。温度在每旋转18度时增加或减少（也基于顺时针或逆时针）。

我抓住旋转并使用余数运算符（％），如果它等于0，则温度会改变。

表盘在0（旋转）时，温度在18°-180°（旋转）时，表盘应达到26°。但是，这取决于拨盘的移动速度而不断变化。

只需添加，温度应该在-90（旋转）的22度。

下面是我在多大程度上得到了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