Получить направление вращения во время перетаскивания - GSAP

Question

Я использую функцию Greensock Spin для dial. Я видел, что 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">