JQuery - Сделать поворот изображения поворот вокруг центральной точки

Question

Я пытаюсь сделать анимацию, где у меня есть 8 значков, вращающихся вокруг центральной точки. Я сделал анимацию поворота CSS, но это не то, что я хочу, потому что изображения заканчиваются вверх ногами и не направлены вверх. См. Изображение

Мне нужно найти способ поворота значков вокруг центральной точки, но оставаться направленным вверх. Кто-нибудь знает, как это сделать или плагин, чтобы это сделать?

Заранее за вашу помощь. Denis

Answer 1

Я создал именно это (в чистом JavaScript, хотя) для клиента несколько месяцев назад

Хитрость заключается в том, чтобы повернуть маленькие круги (сами изображения) в обратном направлении, как большой круг (путь каждого)

Я также использую атрибут data-angle, чтобы указать его и изменить его по большому кругу, например <div class="circle one" data-angle=270>1</div>

var circleArray = document.getElementsByClassName("circle"); 
var angle = 0; 

chargearray(); 

function chargearray() { 
    for (var i = 0, j = circleArray.length; i < j; i++) { 
     var circle = circleArray[i]; 
     var circleAngle = parseInt (circle.dataset.angle); 
     var totalAngle = angle + circleAngle 
     var style = "rotate(" + totalAngle + "deg) translate(200px)"; 
     totalAngle = - totalAngle; 
     style = style + " rotate(" + totalAngle + "deg)" 
     circle.style.webkitTransform = style; 
     circle.style.Transform = style; 
    } 
} 

document.onkeydown = function (e) { 
    e = e || window.event; 
    switch(e.which || e.keyCode) { 
     case 37: 
      angle = angle + 30; 
      chargearray(); 
      break; 
     case 39: 
      angle = angle - 30; 
      chargearray(); 
      break; 
    } 
} 

Here is the production version

Here is a more basic version of it

Here is an absolute bare-bones version

Основной формой встроенной навигацией в конечном продукте кнопки, чтобы ответить на вопросы, но пользователи могут также перемещаться с помощью левой или стрелки вправо (так работает базовая версия).

Добавление нажмите для навигации будет простой задачей, как хорошо, просто изменяя angle степени элемента, который вы хотите и работает changearray

Answer 2

Для этого потребуется некоторое кодирование, но вы можете анимировать угол от 0.0 до 2 * PI, а затем вычислить положения значков на основе угла.

var x = dist * cos(angle); 
var y = dist * sin(angle);