Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.
Приведение в движение: анимация автомобилей с помощью HTML и SVG
Навигация по статье
- SVG с использованием animateMotion
animateMotionАтрибуты- Доступность
- SVG с использованием animateMotion
SVG <animateMotion> предоставляет способ определить, как элемент перемещается по траектории движения. В этой статье Пол Скэнлон делится идеей о том, как использовать это, анимируя гоночные автомобили в бесконечном цикле так же просто, как раз-два-три!
Cегодня один только браузер может делать почти все, что Flash мог делать почти два десятилетия назад! И один из таких трюков, который теперь есть в HTML, называется <animateMotion> — те, кто знаком с Flash, наверняка помнят это как Руководство по движению. Идея была в том, что вы создаете траекторию для следования элементам… и все!
Вот пример того, что вы это можете сделать с <animateMotion>:
Если вы взглянете на документы MDN, то увидите простой пример красного круга, следующего по траектории в бесконечном цикле. Гоночные автомобили в режиме предварительного просмотра следуют тем же простым правилам, и это работает именно так!
SVG с использованием animateMotion
Вот упрощенная версия, которую мы используем для объяснения некоторых тонкостей.
Примечание: удалены некоторые значения пути для краткости, но вы можете увидеть src приведенный ниже фрагмент
<!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>
Первое, на что нужно обратить внимание, - это <g> элемент с id track-lines. Это желтая пунктирная линия, которая представляет путь, по которому будет следовать автомобиль.
Вы также увидите еще один <g> элемент с id pink-car. В этой группе находится <animateMotion> элемент. У него есть атрибут path. Цифры, используемые для формирования этого пути, совпадают с числами, образующими track-lines. <animateMotion> элемент невидим, и его единственное назначение - указать путь для следования элемента.
Кстати, под <animateMotion> элементом находится еще один <path> элемент, это розовый автомобиль, и он будет следовать по пути своего ближайшего соседа.
animateMotion Атрибуты
У <animateMotion> элемента есть несколько дополнительных атрибутов; они следующие:
dur: Продолжительность анимации.repeatCount: Количество циклов анимации.rotate: Это можно рассматривать как ориентацию на траекторию. Это гарантирует, что элемент, который анимируется вокруг траектории, всегда обращен в направлении движения.path: Как уже объяснялось, это фактический путь, по которому будет следовать элемент.
В документах MDN <animateMotion>элемент показан <circle> как дочерний элемент для формы Svg-формата, например:
<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>
Хотя этот подход работает для фигур, он сработает только в том случае, если элемент может принимать дочерний элемент. Элемент SVG path не может этого сделать, поэтому обертывание всего в <g> элементе позволяет HTML определить, где должна начинаться система координат и какие элементы должны следовать по пути. Хитрый ай!
И всё! Мы разработали трек и другие элементы, которые можно увидеть по ссылке для предварительного просмотра, в Adobe Illustrator и экспортировали все это в формате SVG. Затем провели небольшой рефакторинг вручную, чтобы убедиться, что автомобили расположены рядом с <animateMotion> элементом. Вуаля! Гоночная трасса!
Доступность
Одна маленькая загвоздка в том, что <animateMotion> элемент изначально не соблюдает prefers-reduced-motion. Чтобы обойти это в предварительном просмотре, мы добавили медиа-запрос, который устанавливает любой элемент с именем класса car в display: none; значение. Не идеально, но это, по крайней мере, безопасно для движения!
Надеемся, вам понравился этот пост, и если у вас возникнут какие-либо вопросы, пожалуйста, напишите нам в онлайн-чат или в группу Вконтакте.
