/ Вопросы и ответы по JavaScript / Как сделать анимацию на javascript

Как сделать анимацию на javascript

43
Анимации в javascript выполняются с помощью метода setInterval(). Выполняется изменение путем постепенно изменяющихся стилей элемента.

Создание анимации

Ниже будет приведен пример анимации сделанной с помощью javascript, метода setInterval().

Пример:


<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>

Как мы видим в методе setInterval() мы указали функцию jump, в которой происходит поэтапная смена позиции кружочка до определенной позиции.