Javascript 在JQuery中使图像遵循循环路径的最佳方法是什么？

我有一个图像（红色，下图），我想沿着一条环形路径旅行。红色图像应始终在开始时的同一点结束

注意事项： 灰色的圆形路径是不可见的。我只是强调它将遵循的路径

实现此技术的最佳方法/库是什么

---

请查看以下链接：

• 答：| |
• JSFiddle：

---

你真的需要一个图书馆吗，这并不难做到

$(document).ready(function (e) {
    var startAngle = 0;
    var unit = 215;

    var animate = function () {
        var rad = startAngle * (Math.PI / 180);
        $('.circle').css({
            left: 250 + Math.cos(rad) * unit + 'px',
            top: unit * (1 - Math.sin(rad)) + 'px'
        });
        startAngle--;
    }
    var timer = setInterval(animate, 10);
});

这里有一个做一个循环，停在同一个地方等

$(document).ready(function (e) {
    var startAngle = 180;
    var unit = 215;

    var animate = function () {
        if (startAngle > -180) {
            var rad = startAngle * (Math.PI / 180);
            $('.circle').css({
                left: 250 + Math.cos(rad) * unit + 'px',
                top: unit * (1 - Math.sin(rad)) + 'px'
            });
            startAngle--;
            setTimeout(animate, 10);
        }
    }

    $('.circle').on('click', function() {
        startAngle = 180;
        animate();
    });

});

---

+1但多次点击圆圈，使其运行更快：p可能是这样，这很好

$(document).ready(function (e) {
    var startAngle = 180;
    var unit = 215;

    var animate = function () {
        if (startAngle > -180) {
            var rad = startAngle * (Math.PI / 180);
            $('.circle').css({
                left: 250 + Math.cos(rad) * unit + 'px',
                top: unit * (1 - Math.sin(rad)) + 'px'
            });
            startAngle--;
            setTimeout(animate, 10);
        }
    }

    $('.circle').on('click', function() {
        startAngle = 180;
        animate();
    });

});