2016-10-14 67 views
0

我使用Greenscok Draggable作爲調整器。溫度在每旋轉18度時增加或減少(也基於順時針或逆時針)。GSAP - 可拖動的旋轉不準確或不一致

我抓住旋轉並使用餘數運算符(%),如果它等於0,則溫度會改變。

錶盤在0(旋轉)時,溫度在18°-180°(旋轉)時,錶盤應達到26°。但是,這取決於撥盤的移動速度而不斷變化。

只需添加,溫度應該在-90(旋轉)的22度。

下面是我在多大程度上得到了jsbin - http://jsbin.com/wanoraputa/edit?html,js,output

感謝。

回答

0

這是在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