Web Animations API-如何向后播放而不是向后播放？

问题描述

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>

解决方法

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

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