画像を回転するスムーズな移行でマウス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 \t \t  
 
    $('.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">