Javascript: стрелка компаса - вращение прыгает от 0 до 359. Как исправить? [Дубликат]

Преобразование делает именно то, что вы говорите.

Он начинается с 359deg и переходит на 1deg. Вы ищете «rollover» 360deg назад до 1deg, что на самом деле 361deg. Способ преобразования преобразований состоит в том, что он интерполирует между значениями.

Решение вашей проблемы состоит в том, чтобы создать переменную счетчика, которая содержит степени вращения:

var rot = 0;  // lets start at zero, you can apply whatever later

значение поворота, значение изменения:

rot = 359;
// note the extra brackets to ensure the expression is evaluated before
//   the string is assigned this is require in some browsers
element.style.transform = ("rotate( " + rot + "deg )");

, поэтому, если вы это сделаете:

rot = 1;
element.style.transform = ("rotate( " + rot + "deg )");

он возвращается. Таким образом, вам нужно увидеть, если он ближе к 360 или 0 независимо от того, сколько оборотов прошло. Вы делаете это, проверяя значение element.style.transform, которое является текущим значением rot, а затем сравнивается с новым значением rot. Тем не менее, вам нужно сделать это в отношении того, сколько вращений может существовать, поэтому:

var apparentRot = rot % 360;

Теперь, независимо от того, сколько у него было спинов, вы знаете, как далеко от него, отрицательные значения равны к значению + 360:

if ( apparentRot < 0 ) { apparentRot += 360; } 

Теперь вы нормализуете любые отрицательные значения и можете спросить, требуется ли положительное вращение (через 360 градусов в вашем случае) или отрицательный. Поскольку вы, кажется, даете новое значение вращения как 0-360deg, это упрощает вашу проблему. Вы можете спросить, находится ли новое вращение + 360 ближе к старому значению, чем новое вращение:

var aR,          // what the current rotation appears to be (apparentRot shortened)
    nR,          // the new rotation desired (newRot)
    rot;         // what the current rotation is and thus the 'counter'

// there are two interesting events where you have to rotate through 0/360
//   the first is when the original rotation is less than 180 and the new one
//   is greater than 180deg larger, then we go through the apparent 0 to 359...
if ( aR < 180 && (nR > (aR + 180)) ) {
    // rotate back
    rot -= 360;
} 

//   the second case is when the original rotation is over 180deg and the new
//   rotation is less than 180deg smaller
if ( aR >= 180 && (nR <= (aR - 180)) ) {
    // rotate forward
    rot += 360;
}

Кроме этого просто добавление значения нового вращения к rot - это все, что необходимо:

rot += (nR - aR); //  if the apparent rotation is bigger, then the difference is
                  //  'negatively' added to the counter, so the counter is
                  //  correctly kept, same for nR being larger, the difference is
                  //  added to the counter

Немного почистить его:

var el, rot;

function rotateThis(element, nR) {
    var aR;
    rot = rot || 0; // if rot undefined or 0, make 0, else rot
    aR = rot % 360;
    if ( aR < 0 ) { aR += 360; }
    if ( aR < 180 && (nR > (aR + 180)) ) { rot -= 360; }
    if ( aR >= 180 && (nR <= (aR - 180)) ) { rot += 360; }
    rot += (nR - aR);
    element.style.transform = ("rotate( " + rot + "deg )");
}

// this is how to intialize  and apply 0
el = document.getElementById("elementYouWantToUse");
rotateThis(el, 0);

// now call function
rotateThis(el, 359);
rotateThis(el, 1);

Счетчик может идти положительно или отрицательно, это не имеет значения, просто используйте значение между 0- 359 для нового вращения.