javascript - 计算旋转度数的问题

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 rotate() 函数在您尝试将元素旋转给定 Angular 时将元素旋转到给定 Angular 。

rotate() -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>