停止关键帧动画 JavaScript

在实现 web 动画时经常会用到关键帧动画，但可能有时候需要在动画运行过程中停止它。本文将介绍如何停止关键帧动画。

CSS 关键帧动画

首先，我们先来回顾下如何实现 CSS 关键帧动画。

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

#box {
  animation: spin 2s linear infinite;
}

上面的代码创建了一个名为 spin 的关键帧动画，然后将这个动画应用到 #box 元素上，使得它在 2 秒钟内旋转 360 度，并且无限循环。

停止 CSS 关键帧动画

在实现停止 CSS 关键帧动画之前，需要先知道一些相关的 CSS 属性和方法。

CSS animation-play-state 属性

CSS animation-play-state 属性用于控制动画的运行状态，其值为 running 或 paused。

• running: 动画正在运行。
• paused: 动画停止了。

#box {
  animation-play-state: paused;
}

上面的代码将 #box 元素的 animation-play-state 属性设置为 paused，从而停止动画。

JavaScript Element.animate() 方法

JavaScript Element.animate() 方法是用于创建和控制动画的方法。

var animation = element.animate(keyframes, options);

• keyframes: 一个包含动画帧的数组。
• options: 一个包含动画选项的对象，如持续时间、迭代次数等。

例如，下面的代码创建了一个名为 spin 的动画，并将这个动画应用到 #box 元素上。

var keyframes = [
  { transform: 'rotate(0)' },
  { transform: 'rotate(360deg)' }
];

var options = {
  duration: 2000,
  iterations: Infinity,
  easing: 'linear'
};

var animation = document.querySelector('#box').animate(keyframes, options); 

JavaScript Animation.pause() 方法

JavaScript Animation.pause() 方法用于暂停动画。

animation.pause();

上面的代码将名为 animation 的动画暂停。

JavaScript Animation.play() 方法

JavaScript Animation.play() 方法用于播放动画。

animation.play();

上面的代码将名为 animation 的动画播放。

停止关键帧动画

有两种方法可以停止关键帧动画。

使用 CSS animation-play-state 属性

第一种方法是使用 CSS animation-play-state 属性。

document.querySelector('#box').style.animationPlayState = 'paused';

上面的代码将 #box 元素的 animation-play-state 属性设置为 paused，从而停止动画。

使用 JavaScript Animation.pause() 方法

第二种方法是使用 JavaScript Animation.pause() 方法。

document.querySelector('#box').getAnimations()[0].pause();

上面的代码将 #box 元素的第一条动画暂停。

需要注意的是，如果 #box 元素上还有其他动画，那么它们的索引可能与 0 不同。可以使用 getAnimations() 方法来获取所有动画。

document.querySelector('#box').getAnimations().forEach(function(animation) {
  animation.pause();
});

上面的代码将 #box 元素上的所有动画暂停。

总结

本文介绍了如何停止关键帧动画，包括使用 CSS animation-play-state 属性和 JavaScript Animation.pause() 方法。需要注意的是，如果一个元素上有多条动画，那么需要使用 getAnimations() 方法获取所有动画，并逐一操作他们。