Valeur de cette activité : 5 points
Compétence :
07- SVG Animation

A-Module 05 : SVG : 5 points - difficulté : 2

SVG Animation

Présentation

Les formes et le texte SVG peuvent être remplis de différentes façons, avec des couleurs, des dégradés ou des motifs. Ces éléments peuvent être animés.

Nous allons voir ici quelques façons d'animer ces éléments.

Pour consulter des exemples SVG, cliquez ici ou ici *****.


Cours SVG Euroclid

Description


Notez que les directives ne seront plus expliquées dans le détails.
La tâche vous sera décrite et une référence vous sera donnée.
Ainsi, vous serez en mesure d'améliorer votre autonomie dans votre processus d'apprentissage.

La tâche sera un peu plus difficile car vous aurez à :
- identifier le contenu à apprendre
- identifier et récupérer le code à utiliser
- utiliser ce code afin de produire votre travail

Le temps requis afin d'effectuer votre travail sera plus long mais cette méthode vous permettra de mieux comprendre et retenir les concepts et leur utilisation.


Notez également que vous pouvez afficher la source d'un fichier SVG en utilisant le CLIC DROIT / AFFICHER LA SOURCE.

Dans cette exercice, en utilisant les exemples offerts sur les pages suivantes :
http://apike.ca/prog_svg_script_animate.html (Lien suggéré ******)
- http://svglbc.datenverdrahten.de/ (Lien suggéré ******)
-http://wiki.inkscape.org/wiki/index.php/SVG_Animation
-http://apike.ca/prog_svg_smil.html
-http://www.u-picardie.fr/~ferment/etude/darras/anim/animation.html
-http://svg-whiz.com/samples.html
-Animation d'un sprite en svg

créez un document SVG qui contiendra :


- Une animation d'affichage en délai
- Une animation de modification d'une couleur
- Une animation de déplacement d'objet (translation)
- Animation : redimensionnement d'un rectangle



  1. Ajoutez une page à votre portfolio en affichant la directive 13215.
    Complétez les informations suiavntes :
  2. dans le champ titre : L'animation SVG
  3. Dans le champ section : Module SVG
  4. un titre de niveau 1 : L'animation SVG


  5. Cliquez le bouton SVG afin d'afficher les assistants SVG

  6. Cliquez le bouton SVG afin d'effectuer la déclaration XML.
    Notez que dans ce code vous devez spécifier la taille de l'affichage :
    <svg width="500" height="500"></svg>

    -Insérez ensuite dans ce code en vous servant des exemples données sur la page :http://mapageweb.umontreal.ca/turner/francais/textes/blt6336/tutorielsvg/tutsvganimation.html) et des exemples ci-dessous chacun des éléments requis suivants :
    1. -Animation : Affichage en délai de chacune des lettres de ton nom :
      (utilisez le code en exemple ci-dessous que vous devrez modifier :
      <text x="225" y="20" style="visibility:hidden;fill:black;font-size:18;font-family:Arial;"> Mon Texte<set attributeName="visibility" from="hidden" to="visible" begin="0s" end="1s"/> </text> <text x="10" y="50" style="fill:red;font-size:20;font-family:Arial;visibility:visible;">Pcc <animate attributeName="opacity" attributeType="CSS" values="0;0.4;0.8;1;" begin="0s" dur="5s" /> </text> OU <text x="30" y="50" style="fill:red;font-size:20;font-family:Arial;visibility:hidden;">M <animate attributeName="visibility" from="hidden" to="visible" begin="0s" end="3s"/> </text>
      NOTE IMPORTANTE :

      Pour FERMER une balise de FORME (rect, circle, ... ), vous pouvez utiliser /> comme fermeture de balise UNIQUEMENT si cette balise est utilisée sans animation.
      Exemple :<circle cx="10" cy="10" r="10" style="fill:none;stroke:blue;stroke-width:1"/> Mais si vous utilisez du code pour ANIMER la forme, alors il faut utiliser la FERMETURE de balise suivante </circle> Exemple :<circle cx="10" cy="10" r="10" style="fill:none;stroke:blue;stroke-width:1"> Placez les balises d'animation ici </circle>
    2. -Animation : d'un cercle qui change de couleur

      Indice : servez vous de l'exemple : <animate attributeName="fill" begin="0s" dur="4s" fill="freeze" to="rgb(255,255,64)" from="rgb(0,0,128)"/>
    3. - Animation : déplacement d'un rectangle

      Indice : servez vous de l'exemple : <animateTransform attributeName="transform" begin="0s" dur="4s" fill="freeze" calcMode="linear" type="translate" additive="sum" from="196 199" to="196 199"/>
    4. - Animation : redimensionnement d'un rectangle

      Indice : servez vous de l'exemple : <animateTransform attributeName="transform" begin="0s" dur="4s" fill="freeze" calcMode="linear" type="scale" additive="sum" from="1 1" to="0.457317 0.445783"/> OU <animateTransform attributeName="width" begin="0s" dur="4s" fill="freeze" from="100" to="200"/>



  7. Cochez la case à cocher de correction du travail

  8. Enregistrez cette page, visualisez votre travail et apportez les corrections au besoin.

    Cette page servira à la correction de votre travail et à transmettre mes commentaires concernant ton travail.