Web Animations API——如何倒着播放而不是倒着播放？

Question

Web Animations API 具有 reverse 方法，该方法允许以与当前方向相反的方向播放正在运行的动画。

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

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

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

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

var box = document.querySelector(".thing");
var btn = document.querySelector("button");
var span = document.querySelector("span");
const move = box.animate(
    [{ transform: "translate(0px, 0px)" }, { transform: "translate(100px, 0px)" }],
    { duration: 500, fill: "both" }
);
move.pause();

let idx = 0;

function choose() {
    if (idx === 0) {
        move.playbackRate === 1 ? move.play() : move.reverse();
    } else {
        move.reverse();
    }
}

btn.addEventListener("click", () => {
    choose();
    idx = idx === 0 ? 1 : 0;
    span.textContent = idx;
});

.thing {
    width:49px;
    height: 49px;
    background-color: red;
}

<div class="thing"></div>
<button type="button">ClickMe</button>
<span>0</span>

Answer 1

我相信你想要direction 属性，例如

move.effect.updateTiming({ direction: 'reverse' });