如何移除或复用HTMLElement上的Web Animations API旧动画

我正在开发一款使用Web Animations API的动画工具，每次播放动画时都会创建新的动画实例，调用console.log(el.getAnimations())会返回包含多个动画的数组，但我仅使用最后一个，这造成了大量内存浪费。请问如何复用或删除旧的动画？

我的动画播放代码：

function play(){
       el?.animate(el.kfs, {
        duration: duration.value,
        delay: -currentTime.value,
        iterations: Infinity,
        composite: "replace",
    })
}

暂停动画代码：

function pause(){
  el?.getAnimations().forEach(anim => anim?.pause())
}

简单可运行示例：

const el = document.getElementById('el')

function playAnim(){
  el.animate(
  [{backgroundColor:'red'}, {backgroundColor:'black'}],
  {
      duration: 1000,
      iterations: Infinity
   })
 }
 
 playAnim()
 el.getAnimations()[0].pause()
 playAnim()
 console.log(el.getAnimations().length) // 输出 2

<div id="el">el</div>

方案1：复用单个动画实例 #

维护一个全局变量保存当前动画实例，每次播放前先取消旧实例，再创建新实例并保存，确保始终只有一个活跃实例。

修改后的代码：

// 全局变量保存当前动画实例
let currentAnim = null;

function play(){
  // 存在旧动画则取消（彻底移除实例）
  if (currentAnim) {
    currentAnim.cancel();
  }
  // 创建新动画并保存实例
  currentAnim = el?.animate(el.kfs, {
    duration: duration.value,
    delay: -currentTime.value,
    iterations: Infinity,
    composite: "replace",
  });
}

function pause(){
  // 直接操作当前实例暂停
  currentAnim?.pause();
}

方案2：播放前清理所有旧动画 #

如果不需要复用实例，每次播放前主动清理元素上所有已存在的动画，避免实例累积。

修改play函数：

function play(){
  // 遍历并取消元素上所有旧动画
  el?.getAnimations().forEach(anim => anim.cancel());
  // 创建新动画
  el?.animate(el.kfs, {
    duration: duration.value,
    delay: -currentTime.value,
    iterations: Infinity,
    composite: "replace",
  })
}

关键细节 #

• cancel() vs pause()：pause()仅暂停动画执行，但实例仍保留在元素的动画列表中；cancel()会彻底终止动画并将其从元素的动画集合中移除，完全释放内存。如果不需要后续恢复旧动画，优先用cancel()清理。

内容的提问来源于stack exchange，提问作者imv