Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Зацикленная анимация (https://javascript.ru/forum/dom-window/74778-zaciklennaya-animaciya.html)

Начинающий-Js-кодер 07.08.2018 13:38

Зацикленная анимация
 
Здравствуйте. Как можно сделать анимацию, но чтобы она работала по циклу. Например изменяла отступ от 0 до 100 пикселей а потом обратно и так бесконечно раз. Но на js,а не css
Спасибо

Nexus 07.08.2018 13:47

https://jsfiddle.net/7fpLo13u/

Начинающий-Js-кодер 07.08.2018 16:38

То есть тут в замыкании функция,которая после выполнения коллбэком вызывает саму себя?

Начинающий-Js-кодер 07.08.2018 16:39

На чистом js такое можно будет сотворить? или не выйдет?

Nexus 07.08.2018 16:41

Цитата:

Сообщение от Начинающий-Js-кодер
То есть тут в замыкании функция,которая после выполнения коллбэком вызывает саму себя?

Типа того.

Цитата:

Сообщение от Начинающий-Js-кодер
На чистом js такое можно будет сотворить? или не выйдет?

Если jQuery на чистом js написан, значит подобное и без jq можно сделать.

Dilettante_Pro 07.08.2018 16:57

Цитата:

Сообщение от Начинающий-Js-кодер
На чистом js такое можно будет сотворить?

JS-Анимация

рони 07.08.2018 17:22

туда сюда обратно
 
Начинающий-Js-кодер,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   #block{
    position:absolute;
    top:0;
    left:0;
    width:20px;
    height:20px;
    background:#000;
}
  </style>
   <script>
      document.addEventListener('DOMContentLoaded', function() {
         var b = document.querySelector('#block'), m = 0, n = .5;
         function c()
         {
           m += n;
           if(m == 100 || m == 0) n = -n;
           b.style.marginLeft = m + 'px';
           requestAnimationFrame(c)
         }
         requestAnimationFrame(c);
       document.addEventListener('keydown', function(event) {
       if(event.key == 'Enter') alert(m);  });
        });
   </script>
</head>

<body>


<div id="block"></div>
</body>

</html>

Начинающий-Js-кодер 07.08.2018 17:55

Спасибо.
Рони, а вам отдельное и большое-пребольшое.

Теперь хочу спросить-внешнее прерывание в эту функцию можно добавить?например,чтобы нажали клавишу enter и показало текущее значение m?

рони 07.08.2018 18:01

Цитата:

Сообщение от Начинающий-Js-кодер
например,чтобы нажали клавишу enter и показало текущее значение m

в чём проблема?

рони 07.08.2018 18:11

Цитата:

Сообщение от Начинающий-Js-кодер
нажали клавишу enter

смотрите пост №7 снова , курсор на поле примера, кликнуть в любом месте, потом нажать 'Enter'


Часовой пояс GMT +3, время: 20:35.