Animer une page html

Cours / TP

Travaux Pratiques : à vous de jouer !

Travaux Pratriques n°1 : Vous devez réaliser l'animation cette page

Enoncé :

  • Le rond rouge doit disparaître lorsqu'on le survol.
  • Le texte doit être changé en "Bonjour le monde !" lorsqu'il est cliqué.
  • Le rectangle doit tourner autour de lui-même de 10° lorsqu'il est cliqué.
__________________________________________


Encore une petite information : il est possible de modifier les attributs simples (position, largueur, hauteur) d'un objet svg en utilisant :

var x_val= parseFloat(ref_rectangle.attributes.x.value);
ref_rectangle.attributes.x.value="150";

Ah... J'oubliais ! Vous vous rappelez, lors de la deuxième étape nous avons choisi l'identifiant du document svg. Nous l'avions appelé (arbitrairement) "svgroot". Il va maintenant être nous être utile. En effet, pour effectuer des transformations plus élaborées (comme la rotation) il est nécessaire de sélectionner le document SVG dans son ensemble. A partir de là nous pouvons créer un outil "transformation" qui pourra s'appliquer aux objets de notre document.

Un bout de code pour vous aider à démarrer :

1 - notre_document_svg = document.getElementById("svgroot");
2 - transformation_de_notre_svg = notre_document_svg.createSVGTransform();
3 - transformation_de_notre_svg.setRotate(alpha,centre_x,centre_y);
4 - ref_rectangle.transform.baseVal.appendItem(transformation_de_notre_svg);

Dans ce code on récupère la référence de notre document svg (1). On contruit l'outil "transformation" (2). On fixe les paramètres de la rotation de l'outil "transformation" (3). On applique "transformation" à notre rectangle (4).

Si vous utilisez Chrome comme navigateur, il faudra ajouter la ligne chromeWorkaround(transformation_de_notre_svg,ref_rectangle);. En effet, Chrome ne sait pas utiliser correctement la fonction setRotate()... pour l'instant.

Voilà... j'en ai déjà trop dit, à vous de jouer...

La solution est cachée ici !!

var ref_cercle;
var ref_texte;
var ref_rectangle;
var drapeau=false;
var drapeau2=false;
var ref_svgroot;
var t;
ref_cercle= document.getElementById('cercle');
ref_texte= document.getElementById('texte');
ref_rectangle= document.getElementById('rectangle');
ref_cercle.addEventListener('mouseover', function()
{
ref_cercle.style.opacity="0";
}, true);
ref_cercle.addEventListener('mouseout', function()
{
ref_cercle.style.opacity="1";
}, true);
ref_texte.addEventListener('click', function()
{
if(drapeau == false)
{
ref_texte.textContent="Bonjour le monde !";
drapeau = true;
}
else
{
ref_texte.textContent="Hello World !";
drapeau = false;
}
}, true);
ref_svgroot = document.getElementById("svgroot");
t = ref_svgroot.createSVGTransform();
ref_rectangle.transform.baseVal.appendItem(t);
ref_rectangle.attributes.x.value="1";
var alpha=0;
var xx= parseFloat(ref_rectangle.attributes.x.value);
var yy= parseFloat(ref_rectangle.attributes.y.value);
var hh= parseFloat(ref_rectangle.attributes.height.value);
var ww= parseFloat(ref_rectangle.attributes.width.value);
var centre_x=xx+ww/2;
var centre_y=yy+hh/2;
ref_rectangle.addEventListener('click', function()
{
alpha+=10;
t.setRotate(alpha,centre_x,centre_y);
drapeau2 = true;
}, true);

Travaux Pratriques n°2 : Pour aller plus loin...

Enoncé : Vous devez réaliser l'animation de la page d'accueil

__________________________________________


Encore une petite information : Comment répéter des instructions périodiquement ?

Il faut faire appel à la fonction setTimeout( fonction_X() , temps_Y) :

- fonction_X est la fonction à réaliser périodiquement.
- temps_Y est une durée en millisecondes.

setTimeout() doit être appelée dans fonction_X(), qui appellera la fonction setTimout, qui appellera fonction_X(), ... toutes les temps_Y millisecondes !

Exemple :
setTimeout("animation()",40);
function animation()
{
//ICI VOTRE CODE POUR DEPLACER VOTRE OBJET
setTimeout("animation()",40);
}