2016-10-14 2 views
0

私はGreenscok Draggableを専用スタンドとして使用しています。 18度回転ごとに(時計回りまたは反時計回りに基づく)温度が上昇または下降します。GSAP - ドラッグ可能な回転が正確でないか一貫性がありません

私はローテーションを取って余り演算子(%)を使用しています。それが0に等しい場合、温度が変化します。

ダイヤルを0(回転)にすると、温度は18で-180(回転)になり、ダイヤルは26度に達するはずです。しかし、これは、ダイヤルの移動速度によって絶えず変化しています。

ちょうど追加するには、温度は-90(回転)で22度にする必要があります。 http://jsbin.com/wanoraputa/edit?html,js,output

感謝を - ここ

は、私が持っているどのくらいのjsbinです。

答えて

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

関連する問題