Animations

SVG


A. DAAIF
ENSET Mohammedia

UH2 Casablanca


http://anim.daaif.net

aziz@daaif.net

PLAN

  • Rappels

    • SVG dans une page web
    • Application des styles CSS
    • Javascript et accès au DOM

  • Animations SVG

    • Animation d'attribut
    • Animation de couleur
    • Animation de transformation
    • Animation de mouvement

  • Synchronisation d'une animation

Applications des styles CSS

Code javascript

SVG Dans une page Web

Dans une balise <img>

Comme n'importe quelle image

Javascript n'est pas interprété

SVG Dans une page Web

Dans une balise <object>

SVG Dans une page Web

Dans une balise <embed>

SVG dans une page Web

Inline. utilisation de la balise <sgv>



    
        ...

Animations dans SVG


Quatre types d'animations


  • Animation d'attribut <animate >

  • Animation de couleur <animateColor >

  • Animation de transformation <animateTransform >

  • Animation de mouvement <animateMotion >

Principe d'une animation


  • Tous les types d'animations utilisent le concept d'interpolation.

  • A partir d'une situation, on veut arriver à une autre situation

  • En général, il suffit de définir la situation d'arrivée et de donner la durée de l'animation. Le moteur SVG va alors calculer les images intermédiaires manquantes.

  • Il est aussi possible de donner des états intermédiaires

Animation d'attribut

Animation de position

Remarque:
L''objet revient par défaut à sa position initiale.

Gel de l'état à la fin de l'animation


On utilise l'attribut fill qui peut avoir l'une des deux valeurs :

  • remove valeur par défaut
  • freeze permet de geler le dernier état.

Repétition de l'animation

On utilise l'attribut repeatCount qui peut avoir l'une des deux valuers :

  • Entier nombre de repétitions
  • indefinite animation en boucle.

Animation de plusieurs attributs à la fois

Animation de couleur


  • L'élément <animateColor> est déprécié (SVG-1.1) et n'est pas pris en charge par tout les navigateurs.
  • On utilise à sa place l'élement <animate>
  • Il suffit donc d'animer un attribut de couleur

Animation de couleur

Animation d'opacité

Animation de transformation


  • Les transformations possibles sont :
    1. Translation ( translate)
    2. Rotation ( rotate)
    3. Mise à l'Echelle ( scale)
    4. Cisaillement ( skewX et skewY)

  • On applique une transformation à travers l'attribut transform

  • Pour animer une transformation, on utilise l'élément <animateTransform>

Animation de Translation

Animation de Rotation

La rotation étant faite autour du centre(130,90)

Animation d'échelle

Animation de cisaillement

Combinaisons

Animation de mouvement



  • On utilise l'élément <animateMotion>

  • L'objet est animé en suivant un chemin Path

  • Le chemin peut être défini ou référencé dans l'élément.

Exemple 1

Exemple 2

Animation de mouvement

Chemin référencé

Animation de mouvement

Orientation par rapport au chemin

Synchronisation des animations



  • Permettre à des animations de démarrer simultannément

  • Permettre à une animation de commencer à la fin d'une autre animation

  • Arrêter une animation lorsqu'une autre commence

  • ...

Synchronisation par le temps


  • On utilise les attributs begin et end
  • begin permet de définir la date de démarrage de l'animation
  • L'inconvenient est que s'ils y a plusieurs animations, la synchronisation devient complexe

Exemple

Synchronisation par les événements



  • Deux sortes d'événements :
    • Evénements utilisateur (sourie, clavier, ...)
    • Evénements liés à l'animation (début, fin)

  • Le départ peut être provoqué par un click sur un élément

  • Le départ d'une autre animation peut être provoqué par la fin de la première. Etc...

Exemple