动画:jQuery还是Raphael?

动画:jQuery还是Raphael?,jquery,animation,svg,raphael,Jquery,Animation,Svg,Raphael,我正在创建一个页面,它将为对象(image/shape/div)设置动画,并使它们在屏幕上浮动。有时可能会有大量的对象浮动和交互 一个要求是让数据与每个对象关联,因为每个对象都有一个id。因此,如果我单击一个对象,它可以获取该id,然后引用一个包含该对象数据的数组 我的争论是,我应该使用jQuery$.animate函数还是使用Raphael。我知道SVG很好用,但我不确定是否可以给每个对象和id,然后在单击时显示一个包含相关数据的div。单击SVG元素是否可以引用DOM元素?SVG与动态文本的

我正在创建一个页面,它将为对象(image/shape/div)设置动画,并使它们在屏幕上浮动。有时可能会有大量的对象浮动和交互

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

我的争论是,我应该使用jQuery$.animate函数还是使用Raphael。我知道SVG很好用,但我不确定是否可以给每个对象和id,然后在单击时显示一个包含相关数据的div。单击SVG元素是否可以引用DOM元素?SVG与动态文本的配合情况如何?我还担心动画将需要多少处理能力。在这方面有更好的选择吗

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


如果有人对此有任何见解或建议,他们将不胜感激

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

演示:

简单的演示代码,绘制一个圆圈,分配一个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)};
如果你需要做奇特的矢量画和操作,拉斐尔会很好。如果没有,你也可以用你所知道的。此外,您还可以同时使用jQuery和Raphael。

不过,从听起来,jQuery应该足够满足您的需要。

关于快速jQuery动画,您可能会对此感兴趣:

作为一个简短的提示-这在HTML5和画布上是可能的(单击任意点):此外,画布往往更快,因为它基本上是操作系统绘图API上的一个薄层。然而,画布并不像SVG那样完全暴露在DOM中。@fudgey-是的,我看过这个演示。我真的不认为点击时出现的评论实际上与你点击的点有关。它们只是随机选择的,而不是分配给一个点。很确定是这样的。是的,我不需要画矢量图。现在我最关心的是速度,以及我能在屏幕上显示多少对象。基于这一点,这将是我最好的解决方案。现在,我将继续使用jQuery,看看是否遇到任何限制。谢谢