jQuery和围绕中心点制作动画答案

【问题标题】：jQuery and animating around a central pointjQuery和围绕中心点制作动画
【发布时间】：2011-01-25 23:16:23
【问题描述】：

我想知道围绕中心点以圆周运动为元素设置动画的最佳方式？

我想不通... :(

提前致谢。

神经流。

【问题讨论】：

标签： javascript jquery animation

【解决方案1】：

使用jquery.path插件，这里是demo。

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

【讨论】：

呵呵，这个演示在 FF 中不起作用。获取$.path is undefined。这似乎是由 NoScript 中的 nosniff 阻塞引起的。
我会接受这一点，但非库/插件版本对我的代码更有用。不过，您仍然获得了几票！（包括我）。

【解决方案2】：

我能想到的最简单的是：

使中心点位置相对
使动画元素成为上面的子元素
使用以下方法计算左上角：
math.sin(时间 * (角度/秒)) * 距离
数学.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查看它的实际应用。

【讨论】：

这也很好，没有完整插件库的动画真好。 +1
Brock，感谢您添加 jsfiddle 链接和内容。 Neurofluxation，很高兴它对你有用。