0

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>

4

1 回答 1

0

我相信你想要方向属性，例如

move.effect.updateTiming({ direction: 'reverse' });
于 2020-10-02T22:48:59.890 回答