Jquery - 使图像围绕中心点旋转

Question

我正在尝试动画，我有8个图标围绕中心点旋转。 我做了CSS旋转动画，但它不是我想要的，因为图像最终颠倒而不是指向上方。见图

我需要找到一种让图标围绕中心点旋转但仍保持向上的方法。 有人知道怎么做或插件去做吗？

提前感谢您的帮助。 丹尼斯

Answer 1

这需要一些编码，但你可以设置0.0到2 * PI的角度动画，然后根据角度计算图标的位置。

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

Answer 2

我几个月前为客户创建了这个（纯粹的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