Element: getAnimations() 精确拿捏动画时间

前端黑板报

发布于 2024-06-03 11:10:44

890

发布于 2024-06-03 11:10:44

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>

在这个示例中：

1. 定义了一个 CSS 动画 slide 并将其应用于一个带有 animated 类的 div 元素。
2. 使用 Element.getAnimations() 获取与该元素关联的所有动画。
3. 通过点击 "Pause Animations" 按钮，可以暂停所有动画。
4. 通过点击 "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>

在这个示例中：