跟随鼠标jquery旋转图像，实现平滑过渡

Question

当你将鼠标悬停在页面上的某些项目上时，我会尝试让图像旋转。它使用了这里提供的解决方案(出于我的目的进行了编辑)：https://stackoverflow.com/a/10235298。您可以在这里看到我试图实现的一个示例：https://jsfiddle.net/t100gq25/

​

$(function () {
  var img = $('.arrow');

  if (img.length > 0) {
    var offset = img.offset();

    $('.animation-trigger').mouseenter(function (event) {
      var element = $(this);
      var elementPosition = element.offset();
      var elementX = elementPosition.left + (element.width() / 2);
      var elementY = elementPosition.top + (element.height() / 2);
      var imgX = offset.left + (img.width() / 2);
      var imgY = offset.top + (img.height() / 2);
      var radians = Math.atan2(elementX - imgX, elementY - imgY);
      var degrees = (radians * (180 / Math.PI) * -1) + 90;


      img.css('-moz-transform', 'rotate(' + degrees + 'deg)')
        .css('-webkit-transform', 'rotate(' + degrees + 'deg)')
        .css('-o-transform', 'rotate(' + degrees + 'deg)')
        .css('-ms-transform', 'rotate(' + degrees + 'deg)');
    });
  }
});

body {
  padding-top: 150px;
}

.container {
  height: 500px;
}

.menu-1,
.menu-2,
.menu-3,
.menu-4 {
  position: absolute;
  z-index: 99
}

.menu-1 {
  top: 20%;
  left: 20%;
}

.menu-2 {
  top: 20%;
  right: 20%;
}

.menu-3 {
  bottom: 20%;
  left: 20%;
}

.menu-4 {
  bottom: 20%;
  right: 20%;
}

.arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  height: 200px;
  width: 200px;

  -webkit-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -o-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="#" class="menu-1">
    <img src="http://placehold.it/140x35&text=4" class="animation-trigger">
</a>

<a href="#" class="menu-2">
    <img src="http://placehold.it/140x35&text=1" class="animation-trigger">
</a>

<a href="#" class="menu-3">
    <img src="http://placehold.it/140x35&text=3" class="animation-trigger">
</a>

<a href="#" class="menu-4">
    <img src="http://placehold.it/140x35&text=2" class="animation-trigger">
</a>

<img src="https://image.freepik.com/free-icon/arrow-full-shape-pointing-to-right-direction_318-32063.png" class="arrow">

​

它工作得很好！但是，如果您将鼠标悬停在链接1上，箭头将转向它，然后您决定将鼠标悬停在链接4上，箭头将再次指向它。然而，它会一直旋转(顺时针)，而不是只旋转回来(逆时针)的短路线。

我尝试了几次，但都没有成功，如果我想出一个可行的想法，那就是极其冗长的废话。我正在努力找出最好的方法来解决这个问题，所以如果有任何帮助，我将非常感激。

请注意，jsfiddle是我试图实现的一个快速模拟示例。不幸的是，由于客户的机密性，我不能分享实际的源代码。任何解决方案提供我将申请到最终的网站。

非常感谢：)

Answer 1

您将需要存储所有元素的度数，并检查箭头是否需要顺时针或逆时针旋转以获得最短的旋转。

​

$(function() {
  var img = $('.arrow');

  // Store clock wise degrees of all elements
  var clockwiseElemDegrees = {};
  var currentArrowAngle = 0;

  // Treat initial position of arrow as element 0
  var prevElem = '0';
  clockwiseElemDegrees['0'] = 0;

  if (img.length > 0) {

    var offset = img.offset();
    var imgX = offset.left + (img.width() / 2);
    var imgY = offset.top + (img.height() / 2);

    // Get element degrees		    
    $('.animation-trigger').each(function() {
      var element = $(this);
      var elementPosition = element.offset();
      var elementX = elementPosition.left + (element.width() / 2);
      var elementY = elementPosition.top + (element.height() / 2);

      var radians = Math.atan2(elementY - imgY, elementX - imgX);
      var degrees = radians * (180 / Math.PI);

      clockwiseElemDegrees[element.attr('elem')] = (degrees < 0) ? (degrees + 360) : degrees;
    });


    $('.animation-trigger').mouseenter(function(event) {

      // Check if arrow should be rotated clockwise
      var clockwiseDegreesForNextElem = clockwiseElemDegrees[$(this).attr('elem')];
      var clockwiseDegreesForPrevElem = clockwiseElemDegrees[prevElem];
      if (clockwiseDegreesForNextElem < clockwiseDegreesForPrevElem)
        clockwiseDegreesForNextElem += 360;

      var clockwiseRotationRequired = clockwiseDegreesForNextElem - clockwiseDegreesForPrevElem;

      if (clockwiseRotationRequired <= 180) {
        // Do clockwise rotation
        currentArrowAngle += clockwiseRotationRequired;
      } else {
        // Do anticlockwise rotation
        currentArrowAngle -= (360 - clockwiseRotationRequired);
      }

      prevElem = $(this).attr('elem');

      img.css('-moz-transform', 'rotate(' + currentArrowAngle + 'deg)')
        .css('-webkit-transform', 'rotate(' + currentArrowAngle + 'deg)')
        .css('-o-transform', 'rotate(' + currentArrowAngle + 'deg)')
        .css('-ms-transform', 'rotate(' + currentArrowAngle + 'deg)');
    });
  }
});

body {
  padding-top: 150px;
}
.container {
  height: 500px;
}
.menu-1,
.menu-2,
.menu-3,
.menu-4 {
  position: absolute;
  z-index: 99
}
.menu-1 {
  top: 20%;
  left: 20%;
}
.menu-2 {
  top: 20%;
  right: 20%;
}
.menu-3 {
  bottom: 20%;
  left: 20%;
}
.menu-4 {
  bottom: 20%;
  right: 20%;
}
.arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  height: 200px;
  width: 200px;
  -webkit-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -o-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="#" class="menu-1">
  <img src="http://placehold.it/140x35&text=4" class="animation-trigger" elem="1">
</a>

<a href="#" class="menu-2">
  <img src="http://placehold.it/140x35&text=1" class="animation-trigger" elem="2">
</a>

<a href="#" class="menu-3">
  <img src="http://placehold.it/140x35&text=3" class="animation-trigger" elem="3">
</a>

<a href="#" class="menu-4">
  <img src="http://placehold.it/140x35&text=2" class="animation-trigger" elem="4">
</a>

<img src="https://image.freepik.com/free-icon/arrow-full-shape-pointing-to-right-direction_318-32063.png" class="arrow">

​