动画：jQuery 还是 Raphael？

Question

我正在构建一个页面，将会动画化对象（图片/形状/div）并让它们在屏幕上漂浮。有时可能会有大量的对象漂浮和交互。

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

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

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

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

- Nic Hubbard

---

只是一个快速的提醒 - 这是使用HTML5和画布实现的（点击任何一个点）：http://9elements.com/io/projects/html5/canvas/ - Mottie

此外，Canvas 倾向于更快，因为它基本上是覆盖在操作系统绘图 API 上的薄层。然而，与 SVG 相比，Canvas 没有完全暴露给 DOM。 - user120242

@ fudgey - 是的，我看过那个演示。我真的不认为点击时出现的评论与您点击的点有任何关系。它们只是随机选择的，而不是分配给一个点。相当确定这就是情况。 - Nic Hubbard

Answer 1

关于快速的jQuery动画，您可能会对这个网站感兴趣：http://code.zemanta.com/fry/ruleanimation/。

- Olivvv

Answer 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应该已经足够满足你的需求了。

- user120242

---

是的，我现在不需要进行矢量图绘制。目前我最关心的是速度和屏幕上能够显示多少对象。基于这一点，我需要找到最佳解决方案。暂时，我会继续使用jQuery，并观察是否会遇到任何限制。谢谢。 - Nic Hubbard