Как я могу добавить 5-секундную задержку для этой спрайтовой анимации на основе setInterval? - PullRequest
Новая
       43

Как я могу добавить 5-секундную задержку для этой спрайтовой анимации на основе setInterval?

0 голосов
/ 03 февраля 2019

У меня есть спрайт, который запускается с помощью метода setInterval, он запускается все время и перемещает положение фона CSS (x) на 100 / (количество изображений -1) через каждые 60 мс.Когда позиция достигает 96%, я сбрасываю ее на 0. Просто.Это формула для анимации спрайта с процентами.

Теперь я просто хочу добавить 5-секундную задержку между каждым его запуском (каждый раз, когда он достигает 96% x позиции, подождите 5 секунд, а затем снова запустите),Какой самый простой способ добиться этого ... Я попытался обернуть setInterval в другой интервал установки, но проблема здесь в том, что он запускается только чаще (и сводит его с ума).Я знаю, что есть также метод, называемый clearInterval, и я думаю, возможно, что он будет работать каждые несколько секунд, но как потом перезапустить анимацию ??Мне нужно, чтобы он работал снова и снова с 5-секундной задержкой между каждым запуском. 

    function animateAlways() {

        var positionHeadDot = 0;
        var interval = 60;
        const diffHeadDot = 3.703704;


        shadeSparkle = setInterval(() => {
            /////////////////////HeadDot////////////////////////////////////
            document.getElementById("imageHeadDot").style.backgroundPosition =
                `${positionHeadDot}% 0%`;
            if (positionHeadDot < 96) {

                positionHeadDot = positionHeadDot + diffHeadDot;

            }
            else {

                positionHeadDot = 0;

            }
        }, interval); 

    } 

    animateAlways()

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

Вы можете добавить внешний setInterval, затем использовать clearInterval, чтобы очистить внутренний интервал, вместо того, чтобы установить позицию обратно в 0: 

function animateAlways() {
  var positionHeadDot = 0;
  var interval = 60;
  const diffHeadDot = 3.703704;

  shadeSparkle = setInterval(() => {
    /////////////////////HeadDot////////////////////////////////////
    document.getElementById("imageHeadDot").style.backgroundPosition =
      `${positionHeadDot}% 0%`;
    if (positionHeadDot < 96) {
      positionHeadDot = positionHeadDot + diffHeadDot;
    } else {
      clearInterval(shadeSparkle);
    }
  }, interval);
}

animateAlways();
setInterval(animateAlways, 5000);
#imageHeadDot {
  background-image: url('https://www.w3schools.com/CSSref/smiley.gif');
  width: 600px;
  height: 50px;
  border: 3px solid black;
}
<div id="imageHeadDot"></div>
0 голосов
/ 03 февраля 2019

Вероятно, это проще, когда вы конвертируете код setInterval в setTimeout.Затем вы можете различить ход выполнения и последний шаг и задать скорректированное значение времени ожидания: 

function animateAlways() {
    var positionHeadDot = 0;
    var interval = 60;
    var delay = 5000;
    const diffHeadDot = 3.703704;

    function animate() {
        /////////////////////HeadDot////////////////////////////////////
        document.getElementById("imageHeadDot").style.backgroundPosition =
            `${positionHeadDot}% 0%`;
        if (positionHeadDot < 96) {
            positionHeadDot = positionHeadDot + diffHeadDot;
            setTimeout(animate, interval);
        }
        else {
            positionHeadDot = 0;
            setTimeout(animate, delay); // 5 second wait.
        }
    }
    animate();
}
...