Como faço para girar uma div com Raphael.js?

Question

Eu sou novo para Raphael e estou realmente preso, eu gostaria de rodar uma div e seu conteúdo, através de um botão, com Raphael.

Idealmente, eu gostaria de ter uma animação suave que vai de 0 graus a 90 graus quando o botão é clicado, em seguida, quando o botão é clicado novamente, a animação iria inverter. Eu acho que vai mudar o id ou classe no clique do mouse para que eu possa usar o mesmo botão para ambas as animações. Teria que ser sábio?

Eu realmente gostaria de alguma ajuda, por favor, meu Sandbox é em http://jsbin.com/isijo/ e você pode editá-lo em http://jsbin.com/isijo/edit

Muito obrigado antecipadamente por qualquer ajuda.

Answer 1

Olá e bem-vindo ao Raphael!

Eu tenho estado a olhar para Raphael por mais de alguns meses e, apesar da documentação não é muito abrangente do software é brilhante.

Eu tenho mistura Divs com Raphael objetos em muitos aspectos e tem uma "sensação" para o que funciona eo que não funciona.

Eu estou recomendando que você não tente rodar divs mas (ao invés) Raphael objetos.

Primeiro de tudo você poderia fazer um conjunto shiney de Raphael botões usando este código "tweakable" abaixo ..

var bcontrols = new Array();
var yheight = 300;

for (var i = 0; i < 3; i++) {
    bcontrols[i] = paper.circle(15 + (35 * i), yheight, 15).attr({
        fill: "r(.5,.9)#39c-#036",
        stroke: "none"
    });

    bcontrols[i].shine = paper.ellipse(15 + (35 * i), yheight, 14, 14).attr({
        fill: "r(.5,.1)#ccc-#ccc",
        stroke: "none",
        opacity: 0
    });

    bcontrols[i].index = i;
    bcontrols[i].shine.index = i;

    bcontrols[i].shine.mouseover(function (e) {
        this.insertBefore(bcontrols[this.index]);
    });

    bcontrols[i].mouseout(function () {
        this.insertBefore(bcontrols[this.index].shine);
    });

    /* Called from Raphael buttons */
    bcontrols[i].click(function () {
        alert("Hello you just clicked " + this.index);

    });
}

Em seguida, você precisa saber mais sobre a rotação Sets:

var s = paper.set();

s.push(paper.rect(10, 10, 30, 30, 10).attr({fill:'red'}));

s.push(paper.rect(50, 10, 30, 30, 5).attr({fill:'blue'}));

s.push(paper.rect(90, 10, 30, 30).attr({fill:'orange'}));

s.animate({rotation: "360 65 25"}, 2000);

Isto demonstra o grau de rotação e do centro de rotação do "set" na última linha.

Meu Raphael website adicional de recursos que visa documentação suplemento (entre outras coisas):

http://www.irunmywebsite.com/raphael/raphaelsource.html

Heres onde você pode executar os acima de 2 exemplos de código sem alteração:

http://raphaeljs.com/playground.html

Eu estou esperando que isso ajudou ...

Answer 2

A meu conhecimento, não há nenhuma maneira de converter uma div em um objeto de Raphael. Desde o comando Raphael rotação só é definida para Raphael objetos, sua melhor aposta é para criar os principais elementos da sua div (imagens, textos, botões e tudo) em Raphael em vez de HTML, colocá-los juntos em um único conjunto, e, como o conjunto é um objeto Raphael, gire o conjunto.

Answer 3

Consulte Rodar um div no CSS e no IE filtra . Este não é o mesmo que SVG, por isso, se você precisar de mais mágica layout, formas de Raphael são provavelmente o caminho a percorrer. Você deve ser capaz de JQuery usado em conjunto com Raphael para manipular tanto em sua janela, mas eu sou novo para Raphael e nunca o fizeram.