Element.getAnimations() 是一种用于获取与元素关联的所有动画（包括 CSS 动画和 Web 动画 API 动画）的方法。它返回一个包含 Animation 对象的数组。这些 Animation 对象表示元素当前正在运行或挂起的动画。
语法
let animations = element.getAnimations();
返回值
- 一个包含
Animation对象的数组。
使用案例
以下是一些示例代码，展示如何使用 Element.getAnimations() 方法来获取和操作元素的动画。
示例 1：获取并暂停所有动画
假设有一个 HTML 元素正在应用 CSS 动画或通过 Web 动画 API 动画：
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.animated {
animation: slide 2s infinite;
}
</style>
</head>
<body>
<div class="animated">This is a sliding div.</div>
<button id="pause">Pause Animations</button>
<button id="play">Play Animations</button>
<script>
const animatedElement = document.querySelector('.animated');
const pauseButton = document.getElementById('pause');
const playButton = document.getElementById('play');
pauseButton.addEventListener('click', () => {
const animations = animatedElement.getAnimations();
animations.forEach(animation => {
animation.pause();
});
});
playButton.addEventListener('click', () => {
const animations = animatedElement.getAnimations();
animations.forEach(animation => {
animation.play();
});
});
</script>
</body>
</html>
在这个示例中：
- 定义了一个 CSS 动画
slide并将其应用于一个带有animated类的div元素。 - 使用
Element.getAnimations()获取与该元素关联的所有动画。 - 通过点击 "Pause Animations" 按钮，可以暂停所有动画。
- 通过点击 "Play Animations" 按钮，可以恢复所有动画。
示例 2：改变动画播放速度
你还可以使用 Element.getAnimations() 来改变动画的播放速度：
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.animated {
animation: slide 2s infinite;
}
</style>
</head>
<body>
<div class="animated">This is a sliding div.</div>
<button id="speed-up">Speed Up Animations</button>
<button id="slow-down">Slow Down Animations</button>
<script>
const animatedElement = document.querySelector('.animated');
const speedUpButton = document.getElementById('speed-up');
const slowDownButton = document.getElementById('slow-down');
speedUpButton.addEventListener('click', () => {
const animations = animatedElement.getAnimations();
animations.forEach(animation => {
animation.playbackRate *= 2;
});
});
slowDownButton.addEventListener('click', () => {
const animations = animatedElement.getAnimations();
animations.forEach(animation => {
animation.playbackRate /= 2;
});
});
</script>
</body>
</html>
在这个示例中：
- 使用
Element.getAnimations()获取与该元素关联的所有动画。 - 通过点击 "Speed Up Animations" 按钮，可以将动画的播放速度加快一倍。
- 通过点击 "Slow Down Animations" 按钮，可以将动画的播放速度减慢一倍。
Element.getAnimations() 是一个强大的工具，用于控制和管理与元素关联的所有动画，通过这种方式，你可以动态地控制动画的行为和属性。
