Pergunta

Estou construindo uma página que animará objetos (imagem/forma/div) e os flutuam ao redor da tela. Às vezes, pode haver um grande número de objetos flutuando e interagindo.

Um requisito é ter dados associados a cada objeto, pois cada um terá um ID. Portanto, se eu clicar em um objeto, ele poderá pegar esse ID e fazer referência a uma matriz que contém os dados sobre esse objeto.

Meu debate é, se eu usar a função JQuery $. Sei que o SVG seria bom de usar, mas não tenho certeza se posso dar a cada objeto e ID, depois exibir uma divisão contendo dados associados onclick. Clicar em elementos SVG pode referência a elementos DOM? Quão bem o SVG funciona com texto dinâmico? Também estou preocupado com a quantidade de poder de processamento que a animação levará. Existe uma escolha melhor a esse respeito?

BTW, não estou falando de jQuery SVG aqui, apenas jQuery e dom normais.

Se alguém tiver alguma visão disso, ou sugestões, elas seriam muito apreciadas!

Foi útil?

Solução

Sobre as rápidas animações do jQuery, você pode estar interessado nisso: http://code.zemanta.com/fry/ruleanimation/

Outras dicas

Sim. Todos os objetos gráficos são adicionados como objetos DOM.

Uma demonstração: http://rafaeljs.com/github/impact.html

Código de demonstração simples que desenha um círculo, atribui um ID e anexa um evento 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)};

Se você precisar fazer desenhos e manipulações de vetores sofisticados, Raphael seria bom. Caso contrário, você também pode usar o que sabe. Além disso, você pode usar o JQuery e o Raphael ao mesmo tempo.
A partir dos sons, o jQuery deve ser suficiente para suas necessidades.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top