Animations avec SVG

 

Animations avec SVG : sommaire

Animations via JavaScript & jQuey

Animation automatique d’un rond
Grossissement d’un rond par clics successifs
Déplacement automatique de clones
Un texte SVG animé
Déplacement automatique de « sprites » SVG
Animer des courbes et des arcs
Insérer de nouveaux noeuds SVG dans le canevas
Déplacement d’un « sprite » SVG par clavier tactile
Déplacer un objet SVG par clavier
Un jeu : SQUASH

Animations via CSS

Animation automatique d’un rond
Déplacement automatique de clones
Animation via CSS : pièges à éviter
Déplacement automatique de « sprites »
Animer texte SVG
Combiner SVG, CSS & JS pour produire une animation
Propriété transform-origin et canevas SVG
Une animation SVG 3D via CSS

Animations via Snap SVG

Animation avec Snap : premiers pas
Animation avec Snap : approfondissements
Animations génériques & événements
Rythme de l’animation

Animations via le SMIL : balise ANIMATE

Les attributs de la balise animate
Animations contrôlées par le visiteur
Animation de texte
Déplacement automatique de « sprites »
Enchainement d’animations
Progression non linéaire de l’animation
Attribut RESTART
Animations de chemins (courbes et arcs)
Répéter à l’infini une suite d’animations

SMIL : autres balises d’animation

Balise ANIMATEMOTION
Balise ANIMATETRANSFORM
Balise SET
Un chronomètre animé avec SMIL
Une animation 3D avec SMIL