在拖动期间获取旋转方向 - GSAP答案

【问题标题】：Get rotation direction during drag - GSAP在拖动期间获取旋转方向 - GSAP
【发布时间】：2016-09-19 12:35:57
【问题描述】：

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

我假设有一种方法只是用 x/y 坐标进行一些计算，但我就是不知道是什么。

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

【问题讨论】：

标签： javascript jquery draggable gsap

【解决方案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">

【讨论】：

太棒了！感谢您的快速回复。