アニメーション：jQueryまたはRaphael？

Question

私はオブジェクト（イメージ/形/ div）をアニメーション化し、画面の周りに浮かせるページを構築しています。時々、浮遊して相互作用する多数のオブジェクトが存在することがあります。

各オブジェクトにはそれぞれidを持つデータが関連付けられている必要があります。したがって、あるオブジェクトをクリックするとそのIDを取得し、そのオブジェクトに関するデータを保持する配列を参照できます。

私の議論は、jQuery $ .animate関数を使うべきか、Raphaelを使うべきかということです。私はSVGを使用するのが良いだろうが、私は各オブジェクトとIDを与えることができるかどうかは不明ですが、関連するデータを含むdivをクリックしてください。 SVG要素をクリックするとDOM要素を参照できますか？ SVGは動的テキストとどのくらいうまく連携しますか？私はアニメーションがどれくらいの処理能力を要するかについても心配しています。この点でより良い選択肢がありますか？

ここでは、jQuery SVGについては、通常のjQueryとDOMについては言及していません。

これについての洞察や示唆があれば、大変感謝しています。

Answer 1

、あなたはこのことに興味がある可能性があります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のアニメーションについて