переместить изображение с помощью сценария java и html css

Question

Я хочу переместить изображение по пути, используя js и html. это выполнимо?

пожалуйста, проверьте изображение, чтобы лучше понять мой вопрос. есть ли примеры кодов или библиотек? так что я могу изучить и отредактировать, чтобы соответствовать моему случаю. тм

Answer 1

Есть несколько способов решения этой проблемы.

1. Изменить html изображение css стиль с помощью javascript.

   • добавить css стиль через javascript.
   • стиль для перемещения / поворота: transform: translate(20px,10px) rotate(0.5turn);

2. изменить стиль с использованием чистого css анимации @keyframes подробнее здесь

3. Отображение содержимого элемента <canvas> через javascript подробнее здесь

4. Анимированный svg или svg с анимацией css.

5. Встроенный svg, анимированный с помощью javascript или css.

Сейчас я просто собираюсь продемонстрировать подход svg.

Подход SVG (no javascript)

Я предпочитаю создать svg, содержащий несколько изображений, а затем анимировать Это. В приведенном ниже примере используются только круговые объекты, но изображения также должны работать с использованием <image href="">.

<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

    <path id="movepath" d="M 5 5 C 10 10, 20 10, 25 5" stroke="#aaa" stroke-width="1" fill="none" />
    <circle cx=5 cy=5 r=2 fill="#aaa"/>
    <circle cx=25 cy=5 r=2 fill="#aaa"/>
    <circle r=1.5 fill="#000">
        <animateMotion dur="1s" repeatCount="indefinite">
            <mpath xlink:href="#movepath"/>
        </animateMotion>
    </circle>
    
</svg>

Answer 2

Не знаю, понял ли я ваш вопрос, но постараюсь вам ответить. Если бы мне пришлось сделать это, «переместить ракету с земли на солнце», я бы сделал это так:

Я создам 3 изображения.

img rocket;
img earth; 
img sun;

С CSS я буду установить движение Rocket img от img earth к солнцу. Html не является запросом.