以下是一个使用AnimationPlaybackController类的代码示例,该类只具有resume()、pause()和stop()方法。
class AnimationPlaybackController {
constructor(animation) {
this.animation = animation;
this.isPlaying = false;
this.isPaused = false;
}
resume() {
if (this.isPaused) {
this.animation.play();
this.isPaused = false;
this.isPlaying = true;
} else {
console.log("Animation is not paused.");
}
}
pause() {
if (this.isPlaying && !this.isPaused) {
this.animation.pause();
this.isPaused = true;
} else {
console.log("Animation is not playing or already paused.");
}
}
stop() {
this.animation.cancel();
this.isPaused = false;
this.isPlaying = false;
}
}
// 使用示例
const animationElement = document.getElementById("myAnimation");
const animation = animationElement.animate([
{ transform: "translateX(0)" },
{ transform: "translateX(100%)" }
], {
duration: 1000,
easing: "linear",
fill: "forwards"
});
const controller = new AnimationPlaybackController(animation);
// 调用方法
controller.resume(); // 恢复动画
controller.pause(); // 暂停动画
controller.stop(); // 停止动画
上述代码中,AnimationPlaybackController类接受一个animation参数,该参数是通过animate()方法创建的动画实例。然后,该类通过resume()、pause()和stop()方法来控制动画的播放、暂停和停止。在使用示例中,我们创建了一个动画实例,并使用AnimationPlaybackController类来控制该动画的播放、暂停和停止操作。