애니메이션 : 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 객체로 추가됩니다.

데모 : 원을 그립니다 ID를 할당하고, onclick 이벤트를 첨부 http://raphaeljs.com/github/impact.html

간단한 데모 코드 :

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를 애니메이션에 대해