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

【问题标题】：GSAP - Draggable rotate is not accurate or consistentGSAP - 可拖动的旋转不准确或一致
【发布时间】：2016-10-14 09:52:50
【问题描述】：

我正在使用 Greenscok Draggable 作为恒温器。每旋转 18 度温度升高或降低（也基于顺时针或逆时针）。

我正在抓取旋转并使用余数运算符 (%)，如果它等于 0，则温度会发生变化。

表盘在 0（旋转）时，温度为 18，在 -180（旋转）时，表盘应达到 26 度。但是，这会根据表盘的移动速度不断变化。

补充一下，温度应该是22度-90度（旋转）。

这是一个关于我已经走了多远的 jsbin - http://jsbin.com/wanoraputa/edit?html,js,output

谢谢。

【问题讨论】：

标签： javascript rotation draggable gsap

【解决方案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

【讨论】：