Question

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

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

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

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

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

Answer 1

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

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)};

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

动画：jQuery还是拉斐尔？

2 个答案: