拖動期間獲取旋轉方向 - GSAP

Question

我對dial使用Greensock旋轉功能。我已經看到getDirection（）輸出旋轉經過起始點時旋鈕是順時針還是逆時針旋轉，但是當不經過起點時我無法順時針/逆時針工作。

我假設有一種方法只是做一些與x/y座標計算，但我無法弄清楚什麼。

http://jsbin.com/xudipudaku/edit?html,js,output

Answer 1

旋轉似乎被綁定到撥號的rotation值。正/負角度意味着順時針/逆時針。

您需要將當前角度與上一個角度進行比較，以查看按鈕正在旋轉到的方向。

var previousRotation = 0; 
 

 
Draggable.create('#dial', { 
 
    type:'rotation', 
 
    throwProps: true, 
 
    onDrag: function() { 
 
    var yourDraggable = Draggable.get('#dial'); 
 
    
 
    var dir = (yourDraggable.rotation - previousRotation) > 0 ? "clockwise" : "counter-clockwise"; 
 
    console.log("Direction: " + dir + ", angle: " + yourDraggable.rotation); 
 
    
 
    previousRotation = yourDraggable.rotation; 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script> 
 

 
<img id="dial" src="http://greensock.com/wp-content/uploads/custom/draggable/img/knob.png" width="250" height="250">