не могу переделать вызов функции

Question

Есть функция создающая движение по окружности, вызов работает от onclick, а мне надо что бы движение запускалось при загрузке страницы. вот так работает

function animation(args, elem) { // некоторые аргументы определим на будущее
  var $ = {
    radius: 250, // радиус окружности 
    speed: 20 // скорость/задержка ( в js это мс, например 10 мс = 100 кадров в секунду)
  }
  var f = 0;
  var s = 2 * Math.PI / 180; //Вычислим угол
  setInterval(function() { // функция движения 
    f += s; // приращение аргумента
    elem.style.left = 235 + $.radius * Math.sin(f) + 'px'; // меняем координаты элемента, подобно тому как мы это делали в школе в декартовой системе координат. Правда, в данном случае используется полярная система координат, изменяя угол
    elem.style.top = 235 + $.radius * Math.cos(f) + 'px';
  }, $.speed)
}

body {
  background: #000000;
}

.css {
  position: absolute;
  background: #6495c4;
  width: 30px;
  height: 30px;
  left: 70px;
  top: 40px;
  border: 3px solid #fff;
  cursor: pointer;
  border-radius: 19px;
  -webkit-border-radius: 19px;
  -moz-border-radius: 19px;
}

#round {
  position: absolute;
  left: 50%;
  margin-left: -250px;
  top: 100px;
  width: 500px;
  height: 500px;
  border: 5px solid #6495c4;
  border-radius: 250px;
  -webkit-border-radius: 250px;
  -moz-border-radius: 250px;
}

<div id="round">
  <div class="css" onClick="animation({}, this);"></div>
  <div class="css" onClick="animation({}, this);"></div>
  <div class="css" onClick="animation({}, this);"></div>
</div>

а если убираю onClick="animation({}, this) и ставлю вызов функции в jsничего не выходит. Пожалуйста прошу подскажите как вызвать функцию при загрузке страницы, а не после нажатия на шарик?

Answer 1

function animation(args, elem) { // некоторые аргументы определим на будущее
  var $ = {
    radius: 250, // радиус окружности 
    speed: 20 // скорость/задержка ( в js это мс, например 10 мс = 100 кадров в секунду)
  }
  var f = 0;
  var s = 2 * Math.PI / 180; //Вычислим угол
  setInterval(function() { // функция движения 
    f += s; // приращение аргумента
    elem.style.left = 235 + $.radius * Math.sin(f) + 'px'; // меняем координаты элемента, подобно тому как мы это делали в школе в декартовой системе координат. Правда, в данном случае используется полярная система координат, изменяя угол
    elem.style.top = 235 + $.radius * Math.cos(f) + 'px';
  }, $.speed)
}

animation({}, document.querySelector('#round .css'));

body {
  background: #000000;
}

.css {
  position: absolute;
  background: #6495c4;
  width: 30px;
  height: 30px;
  left: 70px;
  top: 40px;
  border: 3px solid #fff;
  cursor: pointer;
  border-radius: 19px;
  -webkit-border-radius: 19px;
  -moz-border-radius: 19px;
}

#round {
  position: absolute;
  left: 50%;
  margin-left: -250px;
  top: 100px;
  width: 500px;
  height: 500px;
  border: 5px solid #6495c4;
  border-radius: 250px;
  -webkit-border-radius: 250px;
  -moz-border-radius: 250px;
}

<div id="round">
  <div class="css"></div>
</div>

Answer 2

Давно делал на SVG что-то подобное. Траектория и форма объекта немного другая.

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background: #FC0;
}

svg {
  position: fixed;
  top: 20%;
  height: 60%;
  left: 20%;
  width: 60%;
}

<svg viewBox="0 0 160 160" width="160" height="160">
  <circle cx="80" cy="80" r="50" />
  <g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
    <path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FFF">
      <animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" />
    </path>
  </g>
  <path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
</svg>

БЛОГ НА HUSL

не могу переделать вызов функции

Ответы (2 шт):