Создать анимацию с помощью setInterval

246
03 сентября 2021, 14:30

При прочтении книги в ней попалась задачка, вроде пустяк, но я никак не могу понять, как правильно это реализовать, подскажите кто нибудь.

Сама задача: "Используйте setInterval для анимации заголовка h1, двигая его по квадрату, вдоль краев страницы. Пусть он переместится на 200 пикселей вправо, на 200 пикселей вниз, 200 пикселей влево, 200 пикселей вверх, а затем начнет с начала. Подсказка: нужно запоминать текущее направление (вправо, вниз, влево или вверх), чтобы знать, увеличивать или уменьшать для заголовка отступы слева (left) и сверху (top). Кроме того, при достижении угла квадрата нужно будет менять направление."

Answer 1

const h = document.querySelector('h1'); 
 
let leftOffset = 0; //начальный отступ слева 
let topOffset = 0; //начальный отступ сверху 
let direction = 'right'; //начальное направление 
 
setInterval(() => {  
 
  switch(direction) { 
    case 'right': 
      //если движемся в право, увеличиваем отступ слева на единицу 
      leftOffset++; 
      //когда отступ достиг 200 сменяем направление на "вниз" 
      if(leftOffset === 200) direction = 'bottom'; 
      break; 
    case 'bottom': 
      //если движемся в вниз, увеличиваем отступ сверху на единицу 
      topOffset++; 
      //когда отступ достиг 200 сменяем направление на "влево" 
      if(topOffset === 200) direction = 'left'; 
      break; 
    case 'left': 
      //если движемся в влево, уменьшаем отступ слева на единицу 
      leftOffset--; 
      //когда отступ достиг 0 сменяем направление на "вверх" 
      if(leftOffset === 0) direction = 'top'; 
      break; 
    case 'top': 
      //если движемся в вверх, уменьшаем отступ сверху на единицу 
      topOffset--; 
      //когда отступ достиг 0 сменяем направление на "вправо" 
      if(topOffset === 0) direction = 'right'; 
      break; 
  } 
   
  //задаем элементу измененные отступы 
  h.style.top = topOffset + 'px'; 
  h.style.left = leftOffset + 'px'; 
   
}, 5);
h1{ 
  position: absolute; 
  left: 0; 
  top: 0; 
}
<h1>s</h1>

READ ALSO
Отслеживание изменений объекта

Отслеживание изменений объекта

Как отследить изменения в объекте?

138
Удаление элементов из state по таймеру

Удаление элементов из state по таймеру

Идея такая: есть локальный state (hook), в нем массив из четырех элементовНа экране есть кнопка добавления нового элемента в этот массив

96
Uncaught ReferenceError: require is not defined. Как избавиться?

Uncaught ReferenceError: require is not defined. Как избавиться?

Собираю проект через GulpТакая проблема: написал код, после "прогона" через babel выдал ошибку: regeneratorRuntime is not defined

164
Как передать дату в ActionCreator

Как передать дату в ActionCreator

У меня есть поле создание поста через input, где после нажатия на enter или кнопки опубликовать пост вызывается функция onAddPost

152