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

时间:2016-09-19 12:35:57

标签: javascript jquery draggable greensock

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

我假设有一种方法只是用x / y坐标进行一些计算,但我无法弄清楚是什么。

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

1 个答案:

答案 0 :(得分:0)

旋转似乎与表盘的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">