Анимации в JavaScript

Анимация

Метод setInterval() используется для создание таймера функции.Вызывание функции идет в миллисекундах.


 var anim = setInterval(jump, 1000);

Мы вызвали функцию jump() которая будет вызываться каждую 1 секунду.


 <style>
 #container {
   width: 400px;
   height: 300px;
   position: relative;
   background: white;
 }
 #animation {
   width: 50px;
   height: 50px;
   background-color: red;
   border-radius: 50%;
 }
 </style>

 <p>
 <button onclick="move()">Click Me</button> 
 </p>

 <div id ="container">
 <div id ="animation"></div>
 </div>

 <script>
  function move() {
  var elem = document.getElementById('animation');
  var pos = 0;
  var id = setInterval(jump, 10);
     function jump() {
     if (pos == 250) {
             clearInterval(id);
     }
    else {
         pos++;
     elem.style.top = pos + 'px';
         }
     }
 }
 </script>

У кнопки мы указали, что при клики, будет выполнятся функция move(). Дальше, мы указали изначальное значение 0 и у id, мы указали сколько будет выполнятся эта анимация и указали у нее функцию jump(). Потом, мы проверили, если значение круга достигнет 250, мы прекратим анимацию через clearInterval().