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.

Travaux avec Inkscape

Production avec Inkscape de l'image vectoriele "piste.svg"

Cette image vectorielle sera le "background" de la zone de dessin SVG dans la page. 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 et c'est ce que j'ai fait.

Utilisation de NotePad

Il faut maintenant animer l'avion : translation 2D et changement d'échelle (pour créer un effet 3D).
On peut utiliser le SMIL ou le CSS.

Première solution : animer avec le SMIL

Rendu de l'animation

Actualisez la page pour rédémarrer l'animation !

Le code SVG correspondant

<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 ="M10,10 l400,400" 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>

Le canevas SVG a pour fond l'image SVG "piste.svg".

L'image PNG "avion.png" est insérée dans le canevas.
Ce "sprite" fait l'objet de deux transformations : translation le long d'un chemin et changement d'échelle.

Si vous ne comprenez pas le code SVG ci-dessous visitez le tuto "animer objets SVG" et plus précisément la partie "SMIL".

Deuxième solution : animer avec CSS

Le rendu

Actualisez la page pour rédémarrer l'animation !

Le code SVG correspondant

Il est beaucoup plus succinct.

<svg width ="100%" height ="auto" style ="background-image :url(../images/piste.svg); background-size :cover" viewBox ="0 0 900 600" id ="decor"> <image xlink:href ="../images/avion.png" id ="jet2" x ="0" y ="0" width ="260" height ="110" /> </svg>

Le code CSS correspondant

@keyframes atterrir
{ 
		0% {transform : scale(0.1); }
		50% {transform : translateX(150px) translateY(200px) scale(0.5);}
		100% {transform : translateX(300px) translateY(400px) scale(1);}
}
#jet2 {animation : atterrir 20s 0s 1 linear forwards  ; }

Si vous ne comprenez le code CSS visitez dans le même site "tutoriel CSS3" et plus précisément les pages dédiées aux transitions et animations.
Retour menu