Le contrôle d’une animation ne passe pas uniquement par le contrôle de la tête de lecture de son animation ou celle d’un ou plusieurs symboles qu’elle contient. Comme nous le verrons dans l’article, « L’animation à base de code », il est possible de s’affranchir de la timeline d’une animation pour obtenir du mouvement, en s’aider de méthodes dédiées (animate() et des quelques unes de la classe GreenSock). Avant d’aller aussi loin, commençons par découvrir les propriétés qui permettent de contrôler un élément sur la scène (dans la page).
L’interactivité que vous obtenez dans l’animation ci-dessus est possible grâce au code contenu sur 2 boutons Trim 1 et Trim 2. Voici celui contenu dans le script d’évènement click du bouton Trim 1.
sym.$("barreJan").css({height:50});
sym.$("barreFev").css({transform:"scaleY(0.4)"});
sym.$("barreMar").css({transform:"scaleY(01)"});
sym.$(".barre").css({backgroundColor:"purple"});
var hautB1 = sym.$("barreJan").position().top;
var hautB2 = sym.$("barreFev").position().top;
var hautB3 = sym.$("barreMar").position().top;
sym.$("etiq1").css({top:hautB1+10,color:"white"});
sym.$("etiq2").css({top:hautB2+10,color:"white"});
sym.$("etiq3").css({top:hautB3+10,color:"white"});
sym.$("etiq1").text("Bof");
sym.$("etiq2").text("Mouais");
sym.$("etiq3").text("Aaaah");
sym.$("texteLegende2").fadeOut(3000);
sym.$("bulleLegende2").delay(3000).slideUp(500);
sym.$("bulleLegende").delay(3500).fadeOut(3000);
sym.$("btTrim1").css({opacity:1,backgroundColor:"purple"});
sym.$("btTrim2").css({opacity:0.15});
sym.$("legende").text("Trimestre 1 - 2015");
sym.$("legende").css({color:"purple"});
sym.$("aiguille").css({transform:"rotate(-20deg)"});
sym.$("leg1").text("Jan");
sym.$("leg2").text("Fév");
sym.$("leg3").text("Mars");
sym.$("volet").hide();
//sym.$("volet").css({display:"none"});
sym.$("onglet").offset({top:71});
Analysons les différentes méthodes et propriétés…
À completer…