Animation avec Motion Path
Faire suivre un élement selon un parcours défini, aujourd’hui c’est possible gràce au module « Motion Path Module Level 1« .
Malheureusement, la compatibilité n’est pas au rendez-vous sur tous les navigateurs (en particulier sur Firefox malgré ce qu’annonce le tableau ci-dessous).
Il va y avoir 3 propriétés pour faire fonctionner ce module:
– offset-path qui va déterminer le tracé du chemin à suivre, il y a plusieurs valeurs possibles: path, ray, url, circle, polygon ou inset. Dans cet exemple, on va utiliser path().
– offset-distance qui détermine la position sur le chemin (dans notre exemple 0% au début et 100% à la fin)
– offset-rotate qui permet de définir l’orientation de l’objet animé selon les courbes du tracé.
OFFSET-PATH
On peut créer des courbes manuellement avec le langage SVG (voir ce tuto ici) mais pour cet exemple, on va utiliser illustrator, tracer une courbe fermée et enregistrer en svg pour récupérer le code SVG créé.
Dans Illustrator, avec l’outil Plume ou Courbure on trace un tracé fermé.
Une fois le tracé terminé, on ajuste la taille du plan de travail aux limites de l’illustration (menu Objet/Plan de travail) puis on fait enregistrer sous et on choisit le format svg.
On ouvre le code SVG et on copie dans le petit fichier texte le code svg du path qui commence après le d= »M79……5z ». On le colle ensuite dans le offset-path du css:
.motion-object {
offset-path: path('M79.8,0.5c29.4,0,44.7,26.5,55.1,41.4c17.1,24.6,9.8,16.6,20.6,30.1c21.2,26.5,43.2,35.6,76,35.5,c47.4-0.1,79.1-21.6,79-47.9c0-23.6-26.8-59.2-79-59.2c-62,0-103.8,106.6-151.7,107.1C38.1,108,0.5,94.3,0.5,59.7,C0.5,19,39.5,0.5,79.8,0.5z');
}
Si on veut voir le tracé (ce qui n’est pas possible avec offset-path), il faut aussi le coller dans le <path> du svg dans le html, il faudra ensuite superposer les deux tracés grâce à des positions relative et absolute.
<svg class="svg-path" width="311" height="108.1" xmlns="http://www.w3.org/2000/svg">
<path d="M79.8,0.5c29.4,0,44.7,26.5,55.1,41.4c17.1,24.6,9.8,16.6,20.6,30.1c21.2,26.5,43.2,35.6,76,35. 5,c47.4-0.1,79.1-21.6,79-47.9c0-23.6-26.8-59.2-79-59.2c-62,0-103.8,106.6- 151.7,107.1C38.1,108,0.5,94.3,0.5,59.7,C0.5,19,39.5,0.5,79.8,0.5z" />
</svg>
OFFSET-DISTANCE
La propriété offset-distance va permettre de définir la position de notre élément le long de notre tracé. Elle accepte toutes les unités mais ici, nous allons utiliser des pourcentages dans l’animation move avec @keyframes:
.motion-object {
animation: move 15s linear infinite;
}
@keyframes move {
0% {
offset-distance: 0%; /* début du tracé */
}
100% {
offset-distance: 100%; /* fin du tracé */
}
}
OFFSET-ROTATE
La propriété offset-rotate, permet de définir l’orientation de l’objet lorsqu’il suit les courbes du parcours :
- auto (valeur par défaut) : indique que l’objet va suivre l’orientation du chemin.
– reverse : il suit l’orientation du parcours mais avec une rotation de 180 degrés.
– Xdeg (ex. 40deg) : l’élément ne suivra plus la rotation de la courbe mais conservera un angle figé durant tout son trajet.
– auto Xdeg (ou reverse Xdeg) : l’élément suivra l’orientation de la courbe avec un décalage de X degrés.
On va utiliser cette dernière option : auto 90deg comme ça, notre élément suivra la courbe avec une rotation au départ de 90 degrés (la coccinelle étant orientée vers le haut par défaut). On va aussi dimensionner notre objet.
.motion-object {
offset-rotate: auto 90deg;
width: 40px;
height: 40px;
}
Nous avons donc tous nos éléments:
– un tracé
– une animation
– un positionnement adapté sur le tracé
Si on a besoin de voir le tracé, on utilisera un stroke sur le svg en html pour le faire apparaitre, sinon il n’y aura pas besoin de ce path, le path du offset-path en css suffira à donner le trajet de l’élément et il n’y aura pas besoin de superposer les 2 tracés comme dans l’exemple qui suit.
See the Pen Animation – Motion Path by Fabrice ROCCASERRA (@Fabson) on CodePen.
Plus d’infos sur le site d’alsacreations.