« Tutoriel GreenSock GSAP » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
m (→‎Simple animation de movement : coquille orthographique)
(→‎Introduction : ajout d'explications sur ce qu'est GSAP et quelques outils il contient)
Ligne 3 : Ligne 3 :
== Introduction ==
== Introduction ==


GSAP est une bibliothèque d'animation pour HTML5 et Flash.
GSAP est une bibliothèque d'animation pour HTML5 et Flash. Cela permet d'animer tout ce à quoi JavaScript peut accéder (propriétés CSS, SVG, ojets de la bibliothèque du canevas, objets génériques...).
 
GSAP est constitué de plusieurs outils de bases, associés à quelques extensions.
 
Les outils de bases sont :
* [http://greensock.com/tweenlite TweenLite] : c'est le module d'animation de base de Greensock, très léger et rapide.
* [http://greensock.com/tweenmax TweenMax] : c'est le module complet de Greensock. Il permet d'étendre TweenLite en ajoutant quelques fonctions utiles comme repeat(), repeatDelay(), yoyo(), updateTo() et d'autres. Il inclut également par défaut les outils et extensions suivants : TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, DirectionalRotationPlugin, BezierPlugin, et EasePack.
* [http://greensock.com/timelinelite TimelineLite] : TimelineLite est un outil permettant de créer et de gérer simplement la chronologie des séquences TweenLite ou TweenMax.
* [http://greensock.com/timelinemax TimelineMax] : TimelineMax étend les fonctionnalités de TimelineLite, en rajoutant par exemple repeat(), repeatDelay(), yoyo(), currentLabel(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() et d'autres.
 
Voir ici pour la liste des extensions disponibles :
*http://greensock.com/plugins/?product_id=4921


Il existe une bonne documentation en Anglais:
Il existe une bonne documentation en Anglais:

Version du 6 décembre 2014 à 12:17

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Introduction

GSAP est une bibliothèque d'animation pour HTML5 et Flash. Cela permet d'animer tout ce à quoi JavaScript peut accéder (propriétés CSS, SVG, ojets de la bibliothèque du canevas, objets génériques...).

GSAP est constitué de plusieurs outils de bases, associés à quelques extensions.

Les outils de bases sont :

  • TweenLite : c'est le module d'animation de base de Greensock, très léger et rapide.
  • TweenMax : c'est le module complet de Greensock. Il permet d'étendre TweenLite en ajoutant quelques fonctions utiles comme repeat(), repeatDelay(), yoyo(), updateTo() et d'autres. Il inclut également par défaut les outils et extensions suivants : TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, DirectionalRotationPlugin, BezierPlugin, et EasePack.
  • TimelineLite : TimelineLite est un outil permettant de créer et de gérer simplement la chronologie des séquences TweenLite ou TweenMax.
  • TimelineMax : TimelineMax étend les fonctionnalités de TimelineLite, en rajoutant par exemple repeat(), repeatDelay(), yoyo(), currentLabel(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() et d'autres.

Voir ici pour la liste des extensions disponibles :

Il existe une bonne documentation en Anglais:

On conseille d'explorer Jump Start: GSAP JS pour commencer.

Exemples

Simple animation de mouvement

Important:

  • L'élément à animer doit être positionné "relativement"
  • TweenLite.to(thing, 3, {left:"600px", ease:Bounce.easeOut}); veut dire qu'on bouge un objet "thing" pendant 3 secondes dans une position côté gauche = 600px (par rapport au containeur, en occurence le div.easeWrapper.
<!doctype html>
<html>
  <head>
      <title>Simple animation with GSAP</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script type="text/javascript" src="src/minified/plugins/CSSPlugin.min.js"></script>
      <script type="text/javascript" src="src/minified/easing/EasePack.min.js"></script>
      <script type="text/javascript" src="src/minified/TweenLite.min.js"></script>
      <script>
	window.onload = function() {
	 var thing = document.getElementById("thing");
         TweenLite.to(thing, 3, {left:"600px", ease:Bounce.easeOut});
	}
      </script>

  </head>
  <body>
    <!-- define a box within which the thing will move -->
    <div id="easeWrapper" style="width:800px">
      <span id="thing" style="position:relative; border-style:solid; background:yellow">HELLO</span>
    </div>
  </body>
</html>

Simple animation de mouvement et de couleur

Pareil que ci-dessus, mais ajout d'autres paramètres d'animation.

<!doctype html>
<html>
  <head>
      <title>Simple animation with GSAP</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script type="text/javascript" src="src/minified/plugins/CSSPlugin.min.js"></script>
      <script type="text/javascript" src="src/minified/easing/EasePack.min.js"></script>
      <script type="text/javascript" src="src/minified/TweenLite.min.js"></script>
      <script>
	window.onload = function() {
	 var thing = document.getElementById("thing");
         TweenLite.to(thing, 3, {left:"600px", 
	                         backgroundColor:"black",
                                 color:"white",
	                         ease:Bounce.easeOut});
	}
      </script>

  </head>
  <body>
    <!-- define a box within which the thing will move -->
    <div id="easeWrapper" style="width:800px">
      <span id="thing" style="position:relative; border-style:solid; background:yellow">HELLO</span>
    </div>
  </body>
</html>

Animation SVG

Problèmes

Attention aux permissions et noms de fichiers et répertoires. Testez si les bibliothèques chargées sont accessibles

Liens

Documentation officielle

Tutos, exemples

Utilisation avec Action Script 3