Archives de Catégorie: animation

SVG girl animation

Par défaut

Bonjour,
voici une animation réaliser avec html5, css3, javascript, et svg. Cette animation fait la promotion d’internet explorer 9 qui visiblement permet maintenant de visionner les animations .svg 🙂
L’animation commence par un vidéo au format .webm (Format ouvert)
puis l’animation .svg prend toute la place dans la fenêtre du navigateur… (sur le vieux ordi ça rame un peu).

Je vous laisse regarder :
http://jsdo.it/event/svggirl

Cette image .svg a été sorti du fichier .html
Vous pouvez télécharger cette image .svg
Attention ! je ne connais pas la licence de cette image.

NB : info trouvé sur catsuka

Animation livre interactive en .svg

Par défaut

Bonjour,
voici un livre interactive avec la possibilité de tourner les pages, d’avoir un aperçu de toutes les pages et de zoomer en .svg et javascript,
à voir à cette adresse :
http://www.paulbrunt.co.uk/svgflip/

Sujets similaires :
https://imppao.wordpress.com/2009/12/02/animation-svg-svg-et-langage-de-programmation/
https://imppao.wordpress.com/2009/07/27/animation-svg/

Animation svg+ (svg et langage de programmation)

Par défaut

Bonjour à tous, voici une mise à jour des animations au format svg+
(le svg+ c’est du svg avec un langage de programmation comme javascript, java ou autres)
1. Exemples d’animation de personnage

2. Un petit cours sur l’animation .svg… ce n’est que du code 🙂
http://www.gchagnon.fr/cours/xml/svgdynamique.html
Attention si vous ne voyez pas les animations utiliser le navigateur Opéra,
car visiblement firefox 3.5 n’y arrive pas :(, et je ne parle même pas d’IE

3. Exemples d’animation 3d et interactive réalisées avec javascript et .svg


4. Des liens vers ailleurs 🙂
Pour trouver des informations sur l’avenir du format svg, je vous conseille d’aller à cette adresse :
http://www.orvinfait.fr/svg_rapide.html vraiment un très bon article,
par contre la mise en page est vraiment pas terrible… fond vert et texte bold en blanc 😮
un petit tuto Hubert Lombard pour intégrer une animation .svg dans un .svg 😉 ->ici

Animation avec inkscape (svg et javascript)

Par défaut

Mise à jour 2/12/2009
à cette adresse

Mise à jour 18/08/2009
Bonjour,
dans le manuel inkscape une page d’introduction sur l’animation avec inkscape (vous allez comprendre comment réaliser ça)
http://tavmjong.free.fr/INKSCAPE/MANUAL/html_fr/Web-Animation.html
et ci-après un article sur le duo .svg et javascript pour apporter interactivité et animation au svg
http://svground.free.fr/dom.php

Le 27/07/2009
Bonjour,
Voici des exemples d’animation en .svg avec javascript.
Les fichiers .svg peuvent s’ouvrir dans inkscape, il est donc possible de modifier certaines éléments.
Pour voir le code XML, on ouvre le .svg dans inkscape, on clique sur l’icône « voir et éditer l’arbre XML du document », cette fenêtre correspond à la fenêtre action script dans flash.
Lorsqu’on sélectionne un objet, le code auquel il correspond et sélectionné dans cette fenêtre XML et inversement, ça c’est cool 😉
Les petits moins, le code reste de la même couleur, il est plus difficile de trouver les fonctions, et les animations .svg sont groumandes en ressource processeur (pour l’instant).

Animation d’une montgolfière
dirigeable
http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm (d’autres d’animations)

Manipulation de photos
(agrandissement, rotation, transparence, passer devant/derrière)…

photo
http://people.mozilla.com/~vladimir/demos/photos.svg

Une horloge
horloge
http://xmlfr.org/svg/clock.svg

Un cube en 3d qui tourne
3d
http://debeissat.nicolas.free.fr/svg3d.php
(bien d’autres exemples)

Bon amusement

PS : si vous avez des adresses d’amination en .svg laissez un petit commentaire avec le lien.