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 に答える