<animateMotion> fournit un moyen de définir comment un élément se déplace le long d’une trajectoire de mouvement. Dans cet article, Paul Scanlon partage une idée sur la façon de l’utiliser en animant des voitures de course dans une boucle infinie aussi simple que un-deux-trois.
Salut! Et si vous aimez le HTML, vous êtes au bon endroit !
J’adore HTML. En tant que développeur front-end à l’ancienne, je pense que c’est une compétence très sous-estimée. J’écris du HTML depuis 2005 environ, et aujourd’hui, le navigateur peut à lui seul faire presque tout ce que Flash pouvait faire il y a près de deux décennies.
un de ces astuce HTML a maintenant s’appelle <animateMotion> — ceux qui connaissent Flash s’en souviendront comme Le guide du mouvement. J’ai trouvé cette vidéo d’il y a 14 ans, mais la méthode était là depuis un moment avant :
L’idée est de créer un chemin pour les éléments à suivre… et le tour est joué !
Voici un exemple de ce que vous pouvez faire avec <animateMotion>:
Si vous jetez un œil à la documentation MDN, vous verrez un exemple simple d’un cercle rouge suivant un chemin dans une boucle infinie. Les voitures de course dans l’aperçu en direct suivent les mêmes règles simples, et c’est ainsi que cela fonctionne !
animateMotion. (Voir l’animation)Utilisation de SVG animateMotion
Voici une version simplifiée que je vais utiliser pour expliquer certains des détails les plus fins.
Note: J’ai supprimé certaines des valeurs de chemin par souci de brièveté, mais vous pouvez voir src pour l’extrait de code suivant dans simple-version.html.)
<!DOCTYPE html>
<html>
<head>
<title>Simple Example</title>
</head>
<body>
<main>
<svg viewBox="0 0 307 184" xmlns="http://www.w3.org/2000/svg">
<g id="track">
<g id="track-lines">
<path fill="none" stroke="#facc15" d="M167.88,111.3..." />
</g>
<g id="pink-car">
<animateMotion dur="4s" repeatCount="indefinite" rotate="auto" path="M167.88,111.3..." />
<path fill="#EC4899" d="M13.71,18.65c0.25-0.5..." />
</g>
</g>
</svg>
</main>
</body>
</html>
La première chose à regarder est la <g> élément avec le id de track-lines. C’est la ligne pointillée jaune qui représente le chemin que la voiture suivra.
vous verrez aussi un autre <g> élément avec le id de pink-car. Au sein de ce groupe se trouve le <animateMotion> élément. a un attribut de path. Les nombres utilisés pour former ce chemin sont les mêmes que les nombres qui forment le track-lines. UN <animateMotion> L’élément est invisible et son seul but est de fournir un chemin à suivre pour un élément.
En parlant de cela, sous le <animateMotion> l’élément est un autre <path> élément, c’est la voiture rose, et elle suivra le chemin de son voisin le plus proche.
animateMotion les attributs
Il y a quelques attributs supplémentaires que le <animateMotion> l’élément accepte ; ce sont les suivants :
dur: La durée de l’animation.repeatCount: le nombre de fois que l’animation doit être répétée.rotate: Cela peut être considéré comme une orientation vers le chemin. Cela garantira que l’élément que vous animez autour du chemin fera toujours face à la direction de déplacement.path: Comme expliqué, il s’agit du chemin réel qu’un élément suivra.
Les documents MDN montrent le <animateMotion> élément en tant qu’enfant d’un Svg <circle> formulaire par exemple :
<circle r="5" fill="red">
<animateMotion
dur="10s"
repeatCount="indefinite"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</circle>
Bien que cette approche fonctionne pour les formes, elle ne fonctionnera que si l’élément peut accepter un élément enfant. L’élément de chemin SVG ne le peut pas, il encapsule donc tout dans le <g> L’élément permet à HTML de déterminer où le système de coordonnées doit commencer et quels éléments doivent suivre le chemin. Sournois aïe !
Et c’est ça. J’ai conçu la piste et les autres éléments que vous voyez dans le lien de prévisualisation dans Adobe Illustrator et j’ai tout exporté au format SVG. J’ai ensuite fait un peu de remaniement manuel pour m’assurer que les voitures étaient adjacentes à un <animateMotion> élément. Et voila! Un hippodrome !
Accessibilité
Petit bémol, le <animateMotion> L’élément n’observe pas nativement le mouvement préféré-réduit. Pour résoudre ce problème dans l’aperçu, j’ai ajouté une requête multimédia qui définit n’importe quel élément avec le nom de classe de car pour display: none;. Pas idéal, mais au moins c’est sûr pour le mouvement !
J’espère que vous avez apprécié cet article, et si vous avez des questions, venez me trouver sur Twitter. @PaulieScanlonoh, et si vous êtes un meilleur illustrateur que moi, n’hésitez pas à redessiner la piste de course et les voitures, et je serai heureux de le coder !
Rendez-vous en ligne !
Lecture supplémentaire sur SmashingMag
(Oui oui)
