在拖动过程中获取旋转方向 - GSAP

Question

我正在使用 Greensock Spin 功能 dial。我已经看到 getDirection() 在旋转超过起点时输出刻度盘是顺时针还是逆时针，但是当不超过起点时我无法让 clockwise/counterclockwise 工作。

我假设有一种方法可以用 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">

在拖动过程中获取旋转方向 - GSAP

Get rotation direction during drag - GSAP

javascript

jquery

draggable

gsap