其他有用的方法
除了暂停和播放，我们还可以使用以下动画方法
Animation.finish() 跳到动画的末尾。
Animation.cancel() 中止动画并移除其效果。
Animation.reverse() 将动画的播放速率 (Animation.playbackRate) 设置为负值，使其向后运行。
让我们首先看一下 playbackRate——负的 playbackRate 将导致动画反向运行。在 《爱丽丝镜中奇遇记》中，爱丽丝来到一个她必须奔跑才能保持原地的世界——并且必须跑得快两倍才能前进！在红皇后赛跑的例子中，爱丽丝和红皇后正在奔跑以保持原地
id="red-queen-and-alice-sprite" src="/shared-assets/images/examples/web-animations/sprite_running-alice-queen_small.png" srcset=" /shared-assets/images/examples/web-animations/sprite_running-alice-queen.png 2x " alt="Alice and the Red Queen running to stay in place." />
id="palm3" src="/shared-assets/images/examples/web-animations/palm3_small.png" srcset="/shared-assets/images/examples/web-animations/palm3.png 2x" alt="" />
id="bush" src="/shared-assets/images/examples/web-animations/bush_small.png" srcset="/shared-assets/images/examples/web-animations/bush.png 2x" alt="" /> id="w_rook_upright" src="/shared-assets/images/examples/web-animations/w_rook_upright_small.png" srcset=" /shared-assets/images/examples/web-animations/w_rook_upright.png 2x " alt="" />
id="r_pawn_upright" src="/shared-assets/images/examples/web-animations/r_pawn_upright_small.png" srcset=" /shared-assets/images/examples/web-animations/r_pawn_upright.png 2x " alt="" /> id="w_rook" src="/shared-assets/images/examples/web-animations/w_rook_small.png" srcset="/shared-assets/images/examples/web-animations/w_rook.png 2x" alt="" /> id="palm1" src="/shared-assets/images/examples/web-animations/palm1_small.png" srcset="/shared-assets/images/examples/web-animations/palm1.png 2x" alt="" />
id="r_pawn" src="/shared-assets/images/examples/web-animations/r_pawn_small.png" srcset="/shared-assets/images/examples/web-animations/r_pawn.png 2x" alt="" /> id="r_knight" src="/shared-assets/images/examples/web-animations/r_knight_small.png" srcset="/shared-assets/images/examples/web-animations/r_knight.png 2x" alt="" /> id="palm2" src="/shared-assets/images/examples/web-animations/palm2_small.png" srcset="/shared-assets/images/examples/web-animations/palm2.png 2x" alt="" />
* {
user-select: none;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.scenery {
width: 100%;
height: 50%;
position: absolute;
bottom: 0;
left: 0;
}
#foreground1,
#foreground2 {
z-index: 1;
}
#foreground2,
#background2 {
transform: translateX(100%);
}
#palm3 {
top: 0;
left: 10%;
}
#w_rook_upright {
top: 30%;
left: 75%;
}
#r_pawn {
top: 10%;
left: 15%;
}
#w_rook {
top: 10%;
left: 80%;
}
#r_pawn_upright {
top: 5%;
left: 30%;
}
#r_knight {
top: 0;
left: 70%;
}
#palm2 {
top: -15%;
left: 90%;
}
#palm1 {
top: -15%;
left: 40%;
}
#bush {
top: 55%;
left: 20%;
}
#red-queen-and-alice {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
width: 80%;
max-width: 450px;
z-index: 1;
}
#red-queen-and-alice::before {
content: " ";
display: block;
padding-top: 87%;
}
#red-queen-and-alice img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.sky,
.earth {
position: absolute;
left: 0;
height: 50vh;
width: 100%;
}
.earth {
background: #eb125d
url("/shared-assets/images/examples/web-animations/bg_earth.jpg") repeat-x 0
0 / 100% auto;
bottom: 0;
}
.sky {
background: #246e89
url("/shared-assets/images/examples/web-animations/bg_sky.jpg") repeat-x
100% 100% / auto 100%;
top: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
const background1 = document.getElementById("background1");
const background2 = document.getElementById("background2");
const foreground1 = document.getElementById("foreground1");
const foreground2 = document.getElementById("foreground2");
const redQueenAliceSprite = document.getElementById(
"red-queen-and-alice-sprite",
);
/* Background animations */
const sceneryFrames = [
{ transform: "translateX(100%)" },
{ transform: "translateX(-100%)" },
];
const sceneryTimingBackground = {
duration: 36000,
iterations: Infinity,
};
const sceneryTimingForeground = {
duration: 12000,
iterations: Infinity,
};
const background1Movement = background1.animate(
sceneryFrames,
sceneryTimingBackground,
);
background1Movement.currentTime =
background1Movement.effect.getComputedTiming().duration / 2;
const background2Movement = background2.animate(
sceneryFrames,
sceneryTimingBackground,
);
const foreground1Movement = foreground1.animate(
sceneryFrames,
sceneryTimingForeground,
);
foreground1Movement.currentTime =
foreground1Movement.effect.getComputedTiming().duration / 2;
const foreground2Movement = foreground2.animate(
sceneryFrames,
sceneryTimingForeground,
);
const spriteFrames = [
{ transform: "translateY(0)" },
{ transform: "translateY(-100%)" },
];
const redQueenAlice = redQueenAliceSprite.animate(spriteFrames, {
easing: "steps(7, end)",
direction: "reverse",
duration: 600,
playbackRate: 1,
iterations: Infinity,
});
因为小孩子不像自动棋子那样容易疲劳，爱丽丝不断减速。我们可以通过设置她动画的 playbackRate 的衰减来实现这一点。我们使用 updatePlaybackRate() 而不是直接设置 playbackRate，因为这会产生平滑的更新
jssetInterval(() => {
// Make sure the playback rate never falls below .4
if (redQueenAlice.playbackRate > 0.4) {
redQueenAlice.updatePlaybackRate(redQueenAlice.playbackRate * 0.9);
}
adjustBackgroundPlayback();
}, 1000);
但是通过点击或轻触来催促它们会通过将其 playbackRate 相乘来加速它们
jsfunction goFaster() {
// But you can speed them up by giving the screen a click or a tap.
redQueenAlice.updatePlaybackRate(redQueenAlice.playbackRate * 1.1);
adjustBackgroundPlayback();
}
document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
背景元素的 playbackRate 也会在您点击或轻触时受到影响。它们的播放速率源自爱丽丝的，如下所示。当您让爱丽丝和红皇后跑得快两倍时会发生什么？当您让它们减速时会发生什么？
js/* Alice tires so easily!
Every so many seconds, reduce their playback rate so they slow a little.
*/
const sceneries = [
foreground1Movement,
foreground2Movement,
background1Movement,
background2Movement,
];
function adjustBackgroundPlayback() {
// If Alice and the Red Queen are running at a speed of 0.8–1.2,
// the background doesn't move.
// But if they fall under 0.8, the background slides backwards
if (redQueenAlice.playbackRate < 0.8) {
sceneries.forEach((anim) => {
anim.updatePlaybackRate(-redQueenAlice.playbackRate / 2);
});
} else if (redQueenAlice.playbackRate > 1.2) {
sceneries.forEach((anim) => {
anim.updatePlaybackRate(redQueenAlice.playbackRate / 2);
});
} else {
sceneries.forEach((anim) => {
anim.updatePlaybackRate(0);
});
}
}
adjustBackgroundPlayback();