Animation en 3D

Cette animation ne fonctionne pas sous IE !

Jusqu'à présent nos animations étaient plates. Dans cette page je vous propose une animation 3D : un jet atterissant sur la piste.
L'avion est d'abord minuscule puis grossit de plus en plus.
Vous allez découvrir qu'en fait c'est très simple.

Mais attention on ne peut se contenter d'utiliser le logiciel Inkscape. Il y a quelques lignes de code SVG à saisir directement dans la page web.

Le code de la page

Le code SVG écrit directement dans la page web tient donc en quelques lignes.

<svg width ="100%" height ="auto" style ="background-image :url(../images/piste.svg); background-size :cover" viewBox ="0 0 900 600"> <image xlink:href ="../images/avion.png" width ="260" height ="110"> <animateMotion begin="0s" dur="20s" fill ="freeze" path ="M400,200 L400,480" restart ="whenNotActive"/> <animateTransform attributeName="transform" type="scale" values = "0.1;0.5;1;1.2" begin="0s" dur="20s" fill ="freeze" restart ="whenNotActive"/> </image> </svg>

Notez l'emploi de l'attribut viewBox afin de pouvoir exprimer la largeur du canevas SVG en pourcentage.

Ma démarche

Production avec Inkscape de piste.svg

Remarquez que le canevas SVG a pour "background" une image vectorielle :"piste.svg". Il s'agit d'une image vectorielle produite avec Inskcape. Voir son rendu ci-dessous : document inkscape

Ce document Inkscape fait 900 pixels par 600.

Production avec Inkscape de avion.png

Toujours avec Inkscape j'ai ensuite produit le document avion.svg
Voir le rendu ci-dessous : document inkscape

Ce document Inkscape fait 260 par 110 (pixels).

Je dois insérer cette image dans un canevas SVG avec la balise image.
Or paradoxalement cette balise ne fonctionne correctement (avec tous les navigateurs) que s'il d'une image matricielle.
Mais comme vous savez il est possible sous Inkscape d'exporter au format PNG un dessin Inkscape.

Animer l'avion

Je dispose donc désormais d'une image SVG (piste.svg) qui va faire fonction de décor et d'une image matricielle (avion.png).
Il faut maintenant déplacer l'avion dans le décor.

Avec un éditeur de textes tel Notepad je n'ai plus qu'à produire les quelques lignes de code en SMIL (voir plus haut).
Vous pouvez remarquer que le conteneur image contient les balises animateMotion et animateTransform.

Les deux animations sont simultanées et durent 20 secondes et ne se répètent pas car l'attribut repeatCount est absent. Or par défaut repeatCount vaut 1.

Pour animer le "sprite" (avion.png) j'aurais pu utiliser le CSS plutôt que le SMIL.
Retour menu