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

Question

[Swartex]

Добрый день,
такая вот интересная задача Ссылка
Нужно один объект(id= "io") заставить двигаться вокруг другого объекта по кругу. Радиус окружности примерно 300-400 px. Я уже понял что нужно использовать функцию setTimeout . Но как это все вместе сделать, я ума не приложу....

Comments

[Kovalsky]

Там на сайте написано "Use your Java Script skills to launch io around jupiter to save planet". Если будете посылать решение, то где-нибудь в комментарии не забудьте написать, что его за вас Лена Семенченко сделала, чтобы они ей приглашение выслали.

Answer 1

[HamSter]

Можно без 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

Comments

[Swartex]

Спасибо!

Answer 2

[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/
Местами грязно и хардкод, но вылизывать лень.

Answer 3

[VoidVolker]

Нет, использовать setTimeout как раз таки и не нужно. Для анимации следует использовать специально для этого предназначенную функцию requestAnimationFrame. Орбита вычисляется очень просто по формуле окружности: (х – а)^2 + (у – b)^2 = R^2

Answer 4

[Виктор Янышев]

Движение объекта по горизонтали, с левой на право в размере 100%, центральный объект имеет z-index меньше двигающегося объекта ( для пересечения второго первым), по горизонтали с право на лево движущийся объект имеет z-index меньше второй объект, при этом, объект уменьшается в размерах по линии своего пути к центру на N% и от центра пути возвращается к 100% размера