끌기 중 회전 방향 가져 오기 - GSAP

Question

dial에 Greensock Spin 기능을 사용하고 있습니다. 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">