问题标签 [web-animations]

我正在使用Web Animations API为一些imgDOM 元素设置动画，以制作一个图像滑块，用于（某种）在游戏中唱歌。图像幻灯片代表乐谱中的小节，每张幻灯片包含两个小节。当前的幻灯片动画从 slide0 开始并在 slide55 结束（或者如果Infinite在计时对象中指定，则循环播放），并且可以正常使用其相关歌曲。作为游戏的一部分，用户应该能够选择歌曲的一部分循环播放。例如，如果他们想继续循环 slide16-slide32，那么动画应该只针对这些幻灯片。

我想知道是否有一种方法可以操纵动画对象以实现与此类似的功能。我正在阅读很多关于 WAAPI 如何让您在运行动画开始后动态操作它的好东西，但我找不到一种方法来操作哪些动画对象实际上是动画的。这些动画对象有 id，但我找不到任何如何使用它们的示例。

Element.animate()我能想到的唯一解决方案是在调用每个元素之前限制要设置动画的元素，例如：

然而，这也将涉及更改幻灯片的 CSS 位置，并且或多或少地违背了使用 WAAPI 的目的，因为它具有在创建动画对象后对其进行操作的能力。我还可以在创建标签并将其添加到 DOM 时应用此函数的变体img，但这需要在每次用户想要循环歌曲的不同部分时删除并重新添加 DOM 元素。

我制作了一个 JS fiddle 来展示如何将元素添加到 dom 并使用 WAAPI 进行动画处理，它包括我讨论过的所有功能。动画只是循环播放相同的 5 张图像。任何关于我下一步行动的建议都会有所帮助，谢谢。

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

我已经使用 WAAPI 创建了一个图像滑块，用于（一种）在游戏中唱歌。滑块与歌曲链接，因此动画时机非常重要。使用 WAAPI 关键帧（与 CSS 关键帧非常相似），时间偏移量为 0-1，因此在下面的代码笔中动态创建关键帧所需的计算。滑块应连续循环每张下一张幻灯片，包括从最后一张幻灯片再次滑到第一张幻灯片。问题是动画不能从slide5无缝地继续到slide0。

这是我动态设置关键帧的方法：

此代码笔显示图像滑块不会从最后一张图像无缝循环回第一张图像。那是因为我找不到使用 WAAPI 关键帧实现连续、无缝循环的方法。由于 CSS 设置为 ，第一张幻灯片 (slide0) 最初是看不见的top: 100%; transform: translateY(-100%);。我这样做是因为幻灯片应该从容器 div 的底部向上滑动开始。

我最初的幻灯片从位置 0 开始，所以 slide0 确实从底部开始，但它不适用于计时并且时间用完，并且第一张幻灯片也需要很长时间才能到位：https：/ /codepen.io/nancy-collins/pen/bGVKBQq

我还尝试了从位置-300px 开始的幻灯片，因此 slide0 在视图中并且不会从底部向上滑动，但是当它到达 slide5 时它会跳转到 slide0，如下所示：https ://codepen.io/nancy-collins/笔/vYNrvaa

我知道滑块是这里的常见讨论，但 WAAPI 没有。这是一个非常新的 API，但肯定能够实现循环滑块。谢谢。

根据 Mozilla Web Animations API 文档，“Document 接口的 getAnimations() 方法返回一个当前有效的所有动画对象的数组，其目标元素是文档的后代。这个数组包括 CSS 动画、CSS 过渡和 Web 动画。”

有没有办法使用它只将 Web 动画对象添加到数组中，不包括 CSS 动画和 CSS 过渡？

以下代码返回文档上的所有动画：

allAnimations 数组结果是这样的：

我希望它只包含网络动画，所以像这样：

我刚开始使用anime.js 并编写了这个基本代码，但它不起作用。

我通过 npm 安装了动画，当它不起作用时还包括 cdn（第 6 行）谁能告诉我哪里出错了..？

Web Animations API 有一个reverse方法可以让正在运行的动画以与当前方向相反的方向播放。

但是，我有一个场景，我只想向后播放定义的动画。目前，我正在通过检查动画是先前进还是后退然后反其道而行之来实现这一点，但这感觉很不稳定！

是否有一种既定模式只要求定义的动画向后运行（不一定从其当前播放头反向运行）？

在下面的代码示例中，如果您在第一个实例 ( idx === 0) 上，我会通过检查是否playbackRate是1第一个来检查您是否继续前进。没有这个，动画将首先向后运行。

感觉应该有一种更简单的方法来在需要时向后运行动画——有吗？

根据谷歌：

一般的经验法则是，如果动画可能在接下来的 200 毫秒内触发[...] ，那么对动画元素进行 will-change 是个好主意。因此，在大多数情况下，您打算在应用程序当前视图中设置动画的任何元素都应该为您计划更改的任何属性启用 will-change。

所以我的问题是，可以will-change在任何属性实际动画之前通过 Web Animations API 应用，这会产生预期的效果吗？或者在幕后发生的任何事情的生命周期中为时已晚，will-change无法正常工作？

似乎通过这个 API 修改的属性实际上并没有作为 CSS 属性反映在 DevTools 中，所以我无法验证这是否真的应用will-change了。

想法的例子：

在Web Animation API中，我们可以通过Element.animate接口为元素设置动画。返回的Animation对象可以通过和播放.play()、暂停或反转。.pause().reverse()

当我尝试 reverse() 动画时出现此错误：

Cannot play reversed Animation with infinite target effect end.

我想用staggerFromTo()属性一个一个地弹出我的页脚缩略图。

这是我的 HTML 代码。

这是我的js代码：

当我动态添加一个使用 JS 动画的项目时，如何让它们在同一时间轴上同步，如下所示：http: //youtube.com/watch ?v=AGiTmjFHs8M&t=9m23s ？我看到一个教程显示了使用 JS 动画与 CSS 的好处是它们继承了相同的时间线。

如果我想控制一个简单的动画，我可以将它设置为header变量，然后这样做header.play()：

但是当我将它链接起来以便使用不同的动画一起发生时composite，这将不起作用，因为它是多个定义：

我将如何控制这些一起使用play(), pause()？