L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Animer des voitures avec HTML et SVG
<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 de la façon de l’utiliser en animant des voitures de course dans une boucle infinie aussi simple que un-deux-trois !
Bonjour! 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 extrêmement sous-estimée. J’écris du HTML depuis ~2005, et aujourd’hui le navigateur peut à lui seul presque faire tout ce que Flash pouvait faire il y a près de deux décennies !
Un tel astuce HTML a maintenant s’appelle <animateMotion> — ceux qui connaissent Flash s’en souviendront comme Le guide de mouvement. J’ai trouvé cette vidéo d’il y a 14 ans, mais la méthode existait depuis un moment avant cela :
L’idée est de créer un chemin pour les éléments à suivre… et c’est tout !
Voici un exemple de ce que vous pouvez faire avec <animateMotion>:
Si vous jetez un coup d’oeil au Documents MDN, vous verrez un exemple simple d’un cercle rouge suivant un chemin sur une boucle infinie. Les voitures de course dans l’aperçu en direct suivent les mêmes règles simples, et cela fonctionne exactement comme ça !
animateMotion. (Voir l’animation)Utilisation de SVG animateMotion
Voici un 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 ci-dessous à version-simple.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 également un autre <g> élément avec le id de pink-car. Au sein de ce groupe se trouve le <animateMotion> élément. Il 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 ça, 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 ; ceux-ci sont les suivants :
dur: La durée de l’animation.repeatCount: Le nombre de fois que l’animation doit boucler.rotate: Cela peut être considéré comme une orientation vers le chemin. Cela garantira que l’élément qui s’anime autour du chemin fait toujours face à la direction de déplacement.path: Comme expliqué, il s’agit du chemin réel qu’un élément suivra.
Le Documents MDN montrer le <animateMotion> élément en tant qu’enfant d’un Svg <circle> forme ex:
<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 enfant. L’élément de chemin SVG ne le peut pas, alors encapsulez tout dans le <g> permet à HTML de déterminer où le système de coordonnées doit commencer et quels éléments doivent suivre le chemin. Sournois ay !
Et c’est tout. J’ai conçu la piste et les autres éléments vus sur le lien de prévisualisation dans Adobe Illustrator et exporté le tout au format SVG. J’ai ensuite fait un peu de remaniement manuel pour m’assurer que les voitures étaient adjacentes à un <animateMotion> element. Et voilà! A race track!
Accessibilité
Un petit hic, le <animateMotion> l’élément n’observe pas nativement préfère-réduire-le-mouvement. Pour contourner ce problème dans l’aperçu, j’ai ajouté un requête média qui définit n’importe quel élément avec le nom de classe de car pour display: none;. Pas idéal, mais il est au moins sans danger pour les mouvements !
J’espère que vous avez apprécié cet article, et si vous avez des questions, n’hésitez pas à venir me trouver sur Twitter. @PaulieScanlonoh et si vous êtes un meilleur illustrateur que moi, s’il vous plaît, n’hésitez pas à re-concevoir la piste de course et les voitures, et je serai heureux de le convertir en code !
À bientôt sur Internet !
Lectures complémentaires sur SmashingMag
(yk, il)
Source link