1

Есть простая анимация на JS, но она движется только по вертикали. Надо сделать так, чтобы она двигалась сперва вниз (как в коде), потом направо, вверх и вернулась в исходное положение.

let btn = document.querySelector('button'),
  box = document.getElementById('box');


function myAnimation() {
  let pos = 0;

  let iq = setInterval(frame, 10);

  function frame() {
    if (pos == 250) {
      clearInterval(iq);
    } else {
      pos++;

      box.style.top = pos + 'px';
    }
  }
}

btn.addEventListener('click', myAnimation);
.wrapper {
  width: 300px;
  height: 300px;
  border: 3px solid #000;
  position: relative;
}

#box {
  width: 50px;
  height: 50px;
  background: green;
  position: absolute;
}

button {
  margin-top: 30px;
}
<div class="wrapper">
  <div id="box">

  </div>
  <!-- /#box -->
</div>
<!-- /.wrapper -->

<button>Click Me</button>

0

2 ответа 2

3

Как-нибудь так можно:

let btn = document.querySelector('button');
let box = document.getElementById('box');


function myAnimation() {
  let down = 0;
  let right = 250;
  let up = 250;
  let left = 0;

  let iq = setInterval(frame, 10);

  function frame() {
    if(down < 250) {
    	down++;
    	box.style.top = down + 'px';
    }
    else if(left < 250) {
    	left++;
        box.style.left = left + 'px';
    }
    else if(up > 0) {
    	up--;
        box.style.top = up + 'px';
    }
    else if(right > 0) {
    	right--;
        box.style.left = right + 'px';
    }
  }
}

btn.addEventListener('click', myAnimation);
.wrapper {
  width: 300px;
  height: 300px;
  border: 3px solid #000;
  position: relative;
}

#box {
  width: 50px;
  height: 50px;
  background: green;
  position: absolute;
}

button {
  margin-top: 30px;
}
<div class="wrapper">
  <div id="box">

  </div>
  <!-- /#box -->
</div>
<!-- /.wrapper -->

<button>Click Me</button>

3
  • Попробуй нажать больше одного раза на кнопку :D
    – Arthur
    21 дек 2018 в 15:23
  • @Arthur, зачем? :) 21 дек 2018 в 15:36
  • 1
    Для того, чтобы увидеть баг. На самом деле нужно всего лишь ограничить последующие клики, чтобы не было такого, но это уже задача не наша, данный ответ решает проблему вопрошающего
    – Arthur
    21 дек 2018 в 15:44
2

За положение абсолютно позиционированного элемента, коим является элемент с id="box", отвечают свойства стиля left, right, bottom, top.

Так как в данном случае меняется только top, то и движение осуществляется в одном направлении.

Чтобы после достижения нижнего края началось движение вправо - вместо остановки таймера, как сейчас, нужно начинать менять свойство left, в таком же интервале.

По достижении правого нижнего угла, перестаем менять left и начинаем уменьшать top.

Аналогично при достижении верхнего края, перестаем менять top и начинаем уменьшать left.

В итоге нужно проверять pos для определения текущего места нахождения элемента, и завести дополнительную переменную dir - для определения в какую сторону необходимо двигаться.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.