Как я могу изменить изображение между итерациями анимации? - PullRequest
Новая
       36

Как я могу изменить изображение между итерациями анимации?

0 голосов
/ 22 апреля 2020

Я пытаюсь создать функцию Javascript, которая повторяет следующий процесс неизвестное число раз:

  • Прикрепить изображение к (пока невидимому) <div>
  • Сделать содержащее <div> (и, следовательно, изображение) видимым
  • Запустить одну итерацию анимации на содержащем <div>
  • Заменить изображение немного другим
  • Запустите анимацию снова с новым изображением
  • Когда все изображения будут анимированы, установите <div> обратно на невидимое снова

У меня 5 или 6 различных звездных изображений это может или не может быть включено в анимацию, но я не обязательно знаю, сколько, какие или в каком порядке они должны быть анимированы. Поэтому я хочу передать список аргументов различной длины в функцию animateStar ().

Первая «итерация» работает нормально, но я не вижу ни одной из последующих итераций. Скорее, после первой итерации я просто вижу третье изображение в списке аргументов, которое статически отображается на экране. Кажется, это всегда третий, который у меня остался, даже если есть более 3 аргументов (или если аргументов меньше 3, готовое состояние вообще не оставляет изображений на экране).

Примерно говоря, я пытаюсь заставить анимацию продолжать перезапускать себя, пока она не исчерпает список аргументов, которые я предоставляю. Использование for (let i of args) l oop вместо этого кажется очевидным, но for() l oop заканчивается за невероятно короткий промежуток времени вместо ожидания завершения каждой итерации анимации. перед началом следующего. Итак, я пытаюсь поймать его в событии animationend.

Из 'console.log' - значение различных переменных в разных точках процесса, насколько я могу судить обо всем Кажется, работает как ожидалось. Но я просто не вижу своих вторых и последующих изображений одушевленными. Любая помощь, чтобы понять, где я иду не так и как исправить, будет принята с благодарностью.

Мой Javascript в настоящее время выглядит так: 

<script>
    function animateStar(...args) {
        var starContainer = document.getElementById("floating-star");
        starContainer.addEventListener("animationend", animListener, false);
        var imgElem = document.createElement("img");
        var imgFileName = args.shift() + ".png";
        imgElem.setAttribute("src", "ImageDirectoryName/" + imgFileName);
        starContainer.appendChild(imgElem);
        starContainer.classList.add("anim-enable");
        function animListener() {
            starContainer.classList.remove("anim-enable");
            if (args.length > 0) {
                imgFileName = args.shift() + ".png";
                imgElem.setAttribute("src", "ImageDirectoryName/" + imgFileName);
                starContainer.classList.add("anim-enable");
            }
        }
    }
</script>

И мои HTML и CSS: 

<html>
<head>
    <title>Animation testing</title>
</head>
<body>
    <div id="floating-star"></div>
    <button onClick="JavaScript:animateStar('star_img3', 'star_img1', 'star_img4', 'star_img2')">Play animation</button>
    <!-- Button is only for testing. Real world, I want to call animateStar() from elsewhere in my script, passing in a varying length string of image names generated 'on the fly' -->
</body>
</html>

<style>
    #floating-star {
        display: none;
        position: relative;
    }

    #floating-star.anim-enable {
        display: inline-block;
        animation: float-down 1.8s, fade-out 1.8s;
    }

    @keyframes float-down {
        from { top: 0; left: 0px; }
        25% { left: 10px; }
        50% { left: 0px; }
        75% { left: -10px; }
        to { top: 180px; left: 0px; }
    }

    @keyframes fade-out {
        from { opacity: 1; }
        70% { opacity: 1; }
        to { opacity: 0; }
    }
</style>
...