計算旋轉度時出現問題

Question

我的代碼中出現了一些我不知道的數學問題。

當您按紅色圓圈之一時，它應該走最近的路徑（向左或向右）並向下旋轉到底部，這有點奏效，但是存在一些問題。

例如，如果先按“ 8”再按“ 3”開始，則容器僅在錯誤的方向上旋轉了45度。

第二個問題是，當車輪旋轉時，數字在旋轉。

這是代碼的jsfiddle： 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 rotation（）函數會將元素旋轉到給定角度。

rotation（）-CSS | MDN

我必須更改一些方法才能使其正常工作：

 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; 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>