Нужно реализовать циклическую анимацию с помощью setInterval, суть в том чтобы окружность двигалась против часовой стрелки по углам страницы увеличивая размер на 15% на каждом этапе (ещё не реализовал, какие есть способы, пока из идей только увеличивать ширину и высоту?) и цикл завершался бы после 5 полных итераций.
Написал 4 функции для каждого этапа и создал переменную для контроля количества пройденных этапов.
Проблемы в том что на первой итерации всё проходит хорошо, а на последующих первый этап не работает, при этом 2-4 этапе проходят успешно (относительно). В чём может быть причина?
Полный код:
<!DOCTYPE HTML>
<html>
<head>
<title>task</title>
<style type="text/css">
.one {
text-align: center; font-size: 20px; background-color: LightYellow; color: DarkGreen; z-index: 2; position: absolute; top:0px; border: solid 2px black;
}
.one {
width: 10em;
margin: 1em auto;
border-radius: 50%;
}
.one::before {
content: "";
display: inline-block;
vertical-align: middle;
padding-top: 100%;
}
</style>
</head>
<body>
<div class="one"> 1 </div>
<script>
let one = document.getElementsByClassName('one')[0];
let start = Date.now();
let toStop = 0;
let timer = setInterval(function() {
let timePass = Date.now() - start;
if(toStop > 4) {
clearInterval(timer);
return;
}
else if (timePass <= 6500 && timePass > 0) {
drawLeft(timePass);
}
else if (timePass <= 9300 && timePass > 6500) {
drawBottom(timePass);
}
else if (timePass <= 15800 && timePass > 9300) {
drawRight(timePass);
}
else if (timePass <= 18600 && timePass > 15800) {
drawTop(timePass);
}
else if (timePass > 18600) {
start = Date.now();
timePass=0;
toStop++;
}
}, 20);
function drawLeft(timePass) { one.style.right = timePass / 4 + 'px'; }
function drawBottom(timePass) { one.style.top = (timePass - 6500) / 4 + 'px'; }
function drawRight(timePass) { one.style.left = (timePass - 9300) / 4 + 'px'; }
function drawTop(timePass) { one.style.top = ((timePass - 18600) / 4) * -1 + 'px'; }
</script>
</body>
</html>
