회전 각도 계산 문제

Question

내 코드에서 알아낼 수없는 수학 문제가 있습니다.

빨간 동그라미 중 하나를 누르면 가장 가까운 경로 (왼쪽 또는 오른쪽)로 내려 가서 아래로 회전합니다. 다소 효과가 있지만 몇 가지 문제가 있습니다.

'8'을 누른 다음 '3'을 눌러 시작하면 컨테이너가 잘못된 방향으로 45 도만 회전합니다.

그리고 두 번째 문제는 휠이 회전 할 때 숫자가 돌아가고 있다는 것입니다. 주어진 각도하여 요소를 회전하려고하는 동안 https://jsfiddle.net/she4x2w6/10/

$('.item').click(function() { 
var currentId = $('#container').data('id'); 
var nextId = $(this).data('id'); 
var currentRotation = (360/items.length) * currentId - (360/items.length); 
var nextRotation = (360/items.length) * nextId - (360/items.length); 
var deg; 

if (currentRotation - nextRotation > 180 || nextRotation - currentRotation > 180) { 
    deg = nextRotation > 180 ? 360 - nextRotation : nextRotation - 360; 
} else { 
    deg = -Math.abs(nextRotation); 
} 
var itemDeg = nextRotation <= 180 ? nextRotation : -Math.abs(360 - nextRotation); 

$('#container').css({ 
    transition: 'transform 0.6s', 
    transform: 'rotate(' + deg + 'deg)' 
}) 

$('.item').css({ 
    transition: 'transform 0.6s', 
    transform: 'rotate(' + itemDeg + 'deg)' 
}) 

Answer 1

CSS의 회전() 함수는 주어진 각도에 요소를 회전 : 여기

코드에 jsfiddle입니다.

var radius = 100; // adjust to move out items in and out 
 
var items = $('.item'), 
 
    container = $('#container'), 
 
    width = container.width(), 
 
    height = container.height(); 
 
var angle = 0, 
 
    step = (2 * Math.PI)/items.length, 
 
    angle = Math.PI/2; 
 

 
items.each(function() { 
 
    var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2); 
 
    var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2); 
 
    $(this).css({ 
 
     left: x + 'px', 
 
     top: y + 'px' 
 
    }); 
 
    angle += step; 
 
}); 
 
$('#container').data('deg', 0); 
 
$('.item').click(function() { 
 
    var currentId = $('#container').data('id'); 
 
    var nextId = $(this).data('id'); 
 
    var currentDeg =$('#container').data('deg'); 
 
    var deg; 
 
    var degg = ((nextId+items.length-1)%items.length)*(360/items.length); 
 
    if (degg>=180) { 
 
     deg = 360-degg; 
 
    } else { 
 
     deg = -degg; 
 
    } 
 
    var t = (currentDeg - deg) % 360; 
 
    if (t<0) { 
 
     t = 360+t; 
 
    } 
 
    if (t<180) { 
 
     deg = currentDeg-t; 
 
    } else { 
 
     deg = currentDeg+360-t; 
 
    } 
 
    var itemDeg = -deg; 
 
\t \t var time = Math.abs(deg-currentDeg)/100; 
 
    $('#container').css({ 
 
     transition: 'transform ' + time + 's', 
 
     transform: 'rotate(' + deg + 'deg)' 
 
    }) 
 
    $('.item').css({ 
 
     transition: 'transform ' + time + 's', 
 
     transform: 'rotate(' + itemDeg + 'deg)' 
 
    }) 
 
    $('#container').data('id', nextId).data('deg', deg); 
 
});

body { 
 
    padding: 2em; 
 
} 
 
#container { 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 10px auto; 
 
    border: 1px solid #000; 
 
    position: relative; 
 
    border-radius: 50%; 
 
} 
 
.item { 
 
    width: 30px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    background: #f00; 
 
} 
 
.item p { 
 
    margin: 0; 
 
} 
 
.active .item-content { 
 
    opacity: 1 !important; 
 
    transition: opacity ease 0.6s; 
 
} 
 
.item .item-content { 
 
    opacity: 0; 
 
    transition: opacity ease 0.3s; 
 
    margin: auto; 
 
    position: absolute; 
 
    width: 230px; 
 
    transform: translate(-50%); 
 
    left: 50%; 
 
    pointer-events: none; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container" data-id="1"> 
 
    <div data-id="1" class="item">1</div> 
 
    <div data-id="2" class="item">2</div> 
 
    <div data-id="3" class="item">3</div> 
 
    <div data-id="4" class="item">4</div> 
 
    <div data-id="5" class="item">5</div> 
 
    <div data-id="6" class="item">6</div> 
 
    <div data-id="7" class="item">7</div> 
 
    <div data-id="8" class="item">8</div> 
 
    <div data-id="9" class="item">9</div> 
 
</div>