动画：jQuery 还是 Raphael？答案

【问题标题】：Animation: jQuery or Raphael?动画：jQuery 还是 Raphael？
【发布时间】：2010-11-29 15:03:01
【问题描述】：

我正在构建一个页面，该页面将为对象（图像/形状/div）设置动画并将它们在屏幕上浮动。有时可能会有大量的物体漂浮并相互作用。

一个要求是让数据与每个对象相关联，因为它们每个都有一个 id。因此，如果我单击一个对象，它可以获取该 ID，然后引用一个包含该对象数据的数组。

我的争论是，我应该使用 jQuery $.animate 函数还是使用 Raphael。我知道 SVG 会很好用，但我不确定是否可以给每个对象和 id，然后在点击时调出一个包含关联数据的 div。点击 SVG 元素可以引用 DOM 元素吗？ SVG 处理动态文本的效果如何？我还担心动画需要多少处理能力。这方面有更好的选择吗？

顺便说一句，这里我不是在谈论 jQuery SVG，只是普通的 jQuery 和 DOM。

如果有人对此有任何见解或建议，将不胜感激！

【问题讨论】：

作为一个简短的说明 - 这可以通过 HTML5 和画布实现（单击任何点）：9elements.com/io/projects/html5/canvas
此外，画布往往更快，因为它基本上是操作系统绘图 API 上的一个薄层。但是，画布不像 SVG 那样完全暴露于 DOM。
@ fudgey - 是的，我看过那个演示。我真的不认为点击时出现的评论实际上与您点击的点有任何关系。它们只是随机选择的，而不是分配给一个点。很确定是这样。

标签： jquery animation svg raphael

【解决方案1】：

关于快速 jQuery 动画，您可能对此感兴趣：http://code.zemanta.com/fry/ruleanimation/

【讨论】：

【解决方案2】：

是的。所有图形对象都作为 DOM 对象添加。

一个演示：http://raphaeljs.com/github/impact.html

绘制圆、分配 id 并附加 onclick 事件的简单演示代码：

var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");
//assign circle id="lolcats"
circle.node.id="lolcats";
//onclick alert id
circle.node.onclick=function(){alert(this.id)};

如果您需要进行精美的矢量绘图和操作，Raphael 会很好。如果没有，您不妨只使用您所知道的。此外，您可以同时使用 jQuery 和 Raphael。
不过，从它的声音来看，jQuery 应该足以满足您的需求。

【讨论】：

是的，我真的不需要画矢量图。现在我最关心的是速度，以及我可以在屏幕上显示多少对象。并且，基于这将是我最好的解决方案。现在，我将坚持使用 jQuery，看看我是否遇到任何限制。谢谢。