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

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

GSAP - Draggable rotate is not accurate or consistent

javascript

rotation

draggable