Animation - Exercice

Créer une vague à l'aide d'un chemin.

Coordonnées des points :

• A : 0, 25
• B : 100, 40
• C : 300, 10
• D : 500, 40
• E : 600, 25
• F : 700, 40

Points d'inflexion :

• [AB] : 50,25 et 50,40
• [BC] : 180,40 et 200,10
• [CD] : symétrique de 200, 10 par raport à C et 400, 40 pour D
• [DE] : 535,40 et 550,25
• [EF] : 650,25 et 650,40

Il est important que la portion de courbe [EF] soit identique à [AB],

Terminer par des segment verticaux et horizontaux pour compléter la forme par en dessous et revenir à l'origine.

La forme fait 700px de large et nous allons créer une fenètre de 100 px de large. Les 100px de la fin de la courbe sont identique aux 100px du début, c'est important pour avoir une transition fluide lorsque l'animation va repartir au début.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150">
</svg>

Ajouter une animation de transformation pour décaler la forme vers la gauche (déplacement négatif) de 600 px. Recommencer l'animation à l'infini.

<animateTransform attributeName="transform"
  attributeType="XML"
  type="translate"
  from="-600"
  to="0"
  dur="9s"
  repeatCount="indefinite"/>

Répéter la forme 3 fois en modifiant la vitesse de l'animation. Appliquer une opacité différente sur les 3 formes.