jQuery和动画围绕中心点

Question

我想知道围绕中心点以圆周运动动画元素的最佳方法吗？

我无法弄明白...... :(

提前致谢。

Neuroflux。

Answer 1

使用jquery.path插件，此处为demo。

（从另一个问题找到它：How would you animate something so that it follows a curve?）

Answer 2

我能想到的最简单的是：

1. 使中心点位置相对
2. 使动画元素成为上面的孩子
3. 计算顶部，左侧使用：
   math.sin（时间*（角度/秒））*距离
   math.cos（....）

简单演示：

var elem = $('h1:eq(0)')
    .append('<span id="round" style="position:absolute;background-color:red;">&nbsp;</span>')
    .css('position','relative')
    .find('span#round');

var i = 0;
setInterval(function(){    
    ++i;  
    elem.css({'left': Math.sin(i * 0.02) * 100, 'top': Math.cos(i * 0.02) * 100});}, 100);




在jsfiddle看到它的实际效果。