Как сделать что бы один объект двигался вокруг другого объекта по кругу?

Добрый день,
такая вот интересная задача Ссылка
Нужно один объект(id= "io") заставить двигаться вокруг другого объекта по кругу. Радиус окружности примерно 300-400 px. Я уже понял что нужно использовать функцию setTimeout . Но как это все вместе сделать, я ума не приложу....
  • Вопрос задан
  • 772 просмотра
Решения вопроса 1
HamSter007
@HamSter007
HTML/CSS верстальщик
Можно без js обойтись, animate:

<div class="box">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
      <circle fill="none" stroke="#000" stroke-width="3" cx="150" cy="150" r="100" />
      <circle cx="150" cy="150" r="10" stroke="red"></circle>
      <g class="orbit">
        <circle cx="80" cy="80" r="20"></circle>
      </g>
    </svg>
  </div>


Анимация:
.box {
  height: 300px;
  width: 300px;
  background: #eee;
}

svg .orbit {
  animation: spin-right 10s 30 linear;
  transform-origin: 150px 150px 0;
}

@keyframes spin-right {
  100% {
    transform: rotate(360deg);
  }
}


пример codepen
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
VoidVolker
@VoidVolker
Нет, использовать setTimeout как раз таки и не нужно. Для анимации следует использовать специально для этого предназначенную функцию requestAnimationFrame. Орбита вычисляется очень просто по формуле окружности: (х – а)^2 + (у – b)^2 = R^2
Ответ написан
SEVNTEC
@SEVNTEC
HTML-верстка
Движение объекта по горизонтали, с левой на право в размере 100%, центральный объект имеет z-index меньше двигающегося объекта ( для пересечения второго первым), по горизонтали с право на лево движущийся объект имеет z-index меньше второй объект, при этом, объект уменьшается в размерах по линии своего пути к центру на N% и от центра пути возвращается к 100% размера
Ответ написан
Stalker_RED
@Stalker_RED
let speed = 100,
    step = Math.PI / 90,
    f = 0
function move() {
  f += step
  obj.style.left = centerX + orbitRadius * Math.sin(f) + 'px'
  obj.style.top = centerY + orbitRadius * Math.cos(f) + 'px'
}
setInterval(move, speed)


Набросал вот quick'n'dirty https://jsfiddle.net/Stalk/1zdL5ng9/
Местами грязно и хардкод, но вылизывать лень.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы