javascript - 如何操作 WAAPI 动画对象以循环播放动画时间轴中的特定点
问题描述
我正在使用Web Animations API为一些imgDOM 元素设置动画，以制作一个图像滑块，用于（某种）在游戏中唱歌。图像幻灯片代表乐谱中的小节，每张幻灯片包含两个小节。当前的幻灯片动画从 slide0 开始并在 slide55 结束（或者如果Infinite在计时对象中指定，则循环播放），并且可以正常使用其相关歌曲。作为游戏的一部分，用户应该能够选择歌曲的一部分循环播放。例如，如果他们想继续循环 slide16-slide32，那么动画应该只针对这些幻灯片。
我想知道是否有一种方法可以操纵动画对象以实现与此类似的功能。我正在阅读很多关于 WAAPI 如何让您在运行动画开始后动态操作它的好东西，但我找不到一种方法来操作哪些动画对象实际上是动画的。这些动画对象有 id，但我找不到任何如何使用它们的示例。
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 的目的，因为它具有在创建动画对象后对其进行操作的能力。我还可以在创建标签并将其添加到 DOM 时应用此函数的变体img，但这需要在每次用户想要循环歌曲的不同部分时删除并重新添加 DOM 元素。
我制作了一个 JS fiddle 来展示如何将元素添加到 dom 并使用 WAAPI 进行动画处理，它包括我讨论过的所有功能。动画只是循环播放相同的 5 张图像。任何关于我下一步行动的建议都会有所帮助，谢谢。