jQuery和以中心点为旋转轴的动画

Question

我想知道以最佳方式围绕中心点使元素沿着圆形运动的动画方法是什么？

我还没有完全弄清楚... :(

提前感谢。

Neuroflux.

- Barrie Reader

Answer 1

使用jquery.path插件，这里有一个演示。（从另一个问题中发现：如何使动画沿着曲线运动？）

- Thai

---

哎呀，这个演示在火狐浏览器中没有运行。出现 $.path is undefined 的错误。看起来是由于 NoScript 中的 nosniff 阻止造成的。 - Brock Adams

我本来会接受这个的，但是非库/插件版本对我的代码更有用。不过你仍然得到了一些赞同票！（包括我的）。 - Barrie Reader

Answer 2

我能想到的最简单的方法是：

1. 将中心点位置设置为相对定位
2. 将动画元素设置为上述元素的子元素
3. 使用以下公式计算上下左右：
   math.sin(time * (angle /second)) * distance
   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上查看它的运作。

- ccppjava

---

这也非常好，很高兴能够拥有动画而不需要完整的插件库。+1 - Barrie Reader

Brock，感谢您添加jsfiddle链接和内容。Neurofluxation，很高兴它对您有用。 - ccppjava