Ниже изображение автомобиля в формате PNG. Я хочу сделать анимацию движения автомобиля вдоль какой-нибудь траектории. Желательно, чтобы колёса автомобиля вращались. Я понимаю, что для этого необходимо перевести картинку в формат SVG. Как это сделать? С помощью векторного редактора или вручную, используя формулы SVG, или, как-то по другому, например, применяя трансформации CSS3.
Ответ Анимация движения автомобиля по заданной траектории Cначала нам нужно нарисовать траекторию. Для этого открываем в векторном редакторе файл svg автомобиля
Рисуем путь Сохраняем файл Чтобы убрать из файла SVG лишнюю информацию, которую сохраняет векторный редактор необходимо оптимизировать файл с помощью любого оптимизатора, например - SVGOMG Копируем из файла Path траектории
Для анимации движения вдоль заданного пути используем команду: ,где #car-dodger" - уникальный идентификатор автомобиля #carPath" - идентификатор пути, по которому движется автомобиль Внизу полный код:
<!-- Top --> <!-- Tail Lights red --> <!-- Body --> <!-- Left line --> <!-- Right line --> <!-- Left bumper --> <!-- Right bumper --> <!-- Left wheel --> <!-- Right wheel --> <!-- Gold light -->