Как управлять объектами анимации WAAPI до l oop с помощью определенных c точек на временной шкале анимации - PullRequest
Новая
       22

Как управлять объектами анимации WAAPI до l oop с помощью определенных c точек на временной шкале анимации

0 голосов
/ 05 мая 2020

Я использую API веб-анимации для анимации некоторых img элементов DOM, чтобы сделать слайдер изображения для (своего рода) игры. Слайды с изображениями представляют собой полосы в листе Musi c, и каждый слайд содержит две полосы. В настоящее время слайды анимируются, начиная с slide0 и заканчивая slide55 (или циклически, если в объекте времени указано Infinite), и отлично работает с соответствующей песней. Как часть игры, пользователи должны иметь возможность выбрать часть песни для воспроизведения на l oop. Например, если они хотят продолжать цикл slide16-slide32, то анимация должна быть нацелена только на эти слайды.

Мне интересно, есть ли способ манипулировать объектами анимации для достижения аналогичной функциональности. Я читаю много замечательных вещей о том, как WAAPI позволяет вам динамически манипулировать запущенной анимацией после ее запуска, но я не могу найти способ управлять тем, какие объекты анимации действительно анимированы. У этих анимационных объектов есть идентификаторы, но я не могу найти примеров их использования.

Единственное решение, которое я могу придумать, - это ограничить, какие элементы анимировать непосредственно перед вызовом Element.animate() для каждого, что-то вроде: 


    var firstBar = 4;
    var lastBar = 12;

    async function init() {
      var elements = document.querySelectorAll(`.slide`);
      elements = Array.prototype.slice.call(elements);
      var loopElements = await loopBars(firstBar, lastBar, elements)
      //map the elements and call Element.animate() method for each
      loopElements.map((element, i) => {
            imgAnimations[i] = element.animate(keysframes, timing)
        })
    };

    function loopBars(firstBar, lastBar, elementArray) {
      var elements = []
      for(firstBar; firstBar <= lastBar; firstBar++) {
          var slide = elementArray[firstBar];
          var pushToArray = elements.push(slide)
      }
      return elements
    }

Однако это также потребует изменения CSS положение слайдов, и просто более или менее побеждает цель использования WAAPI из-за его возможностей манипулировать объектами анимации после их создания. Я мог бы также применить вариант этой функции, когда теги img создаются и добавляются в DOM, но это потребует удаления и повторного добавления элементов DOM каждый раз, когда пользователь хочет l oop различных разделов песни. .

Я сделал JS скрипт, чтобы показать, как элементы добавляются в dom и анимируются с помощью WAAPI, он включает в себя все функции, которые я обсуждал. Анимация просто повторяет одни и те же 5 изображений. Любые предложения по поводу моего следующего шага помогут, спасибо.

https://jsfiddle.net/j84ksdLp/122/

...