Comment faire pivoter une div avec Raphael.js?

Question

Je suis tout nouveau à Raphael et je suis vraiment coincé, je voudrais faire pivoter une div et son contenu, en utilisant un bouton, avec Raphael.

Idéalement, je voudrais avoir une animation lisse qui passe de 0 degrés à -90 degrés lorsque l'on clique sur le bouton, puis lorsque l'on clique à nouveau sur le bouton, l'animation s'inverse. Je pense que je vais changer l'identifiant ou la classe sur un clic de souris afin que je puisse utiliser le même bouton pour les deux animations. Est-ce que ce serait sage?

Je voudrais vraiment un peu d'aide s'il vous plaît, mon Bac à sable est à http://jsbin.com/isijo/ et vous pouvez le modifier à http://jsbin.com/isijo/edit

Un grand merci à l'avance pour toute aide.

Answer 1

Bonjour et bienvenue sur Raphael!

J'ai regardé Raphael pendant plus de quelques mois et même si la documentation n'est pas très complète, le logiciel est génial.

J'ai mélangé des Divs avec des objets de Raphaël de plusieurs façons et j'ai une «sensation» pour ce qui fonctionne et ce qui ne marche pas.

Je vous recommande de ne pas essayer de faire pivoter des div mais des objets de Raphaël (à la place).

Tout d'abord, vous pouvez faire un ensemble shiney de boutons Raphaël en utilisant ce code « tweakable » ci-dessous ..

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

    }); 
} 

Ensuite, vous devez savoir plus sur les ensembles tournants:

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

Cette montre le degré de rotation et le centre de rotation du "set" sur la dernière ligne.

Mon autre site Web des ressources de Raphaël qui vise à compléter les documents (entre autres):

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

Heres où vous pouvez exécuter les 2 exemples de code ci-dessus sans altération:

http://raphaeljs.com/playground.html

J'espère que cela a aidé ...

Answer 2

À ma connaissance , il n'y a aucun moyen de convertir un div en un objet Raphael. Puisque la commande Raphael rotate n'est définie que pour les objets Raphael, le mieux est de créer les éléments majeurs de votre div (images, texte, boutons et tout) dans Raphael au lieu de HTML, de les assembler en un seul ensemble, et, comme l'ensemble est un objet Raphael, faites pivoter l'ensemble.

Answer 3

Consultez Rotate a div in CSS and in IE filters. Ce n'est pas la même chose que SVG, donc si vous avez besoin de plus de magie de mise en page, les formes de Raphael sont probablement le chemin à parcourir. Vous devriez pouvoir utiliser JQuery en concert avec Raphael pour manipuler les deux dans votre fenêtre, mais je suis tout nouveau à Raphael et je ne l'ai jamais fait.