如何在不重启动画的前提下修改通过element.animate设置的动画时长？

解决方案 #

你要的无跳变速效果可以直接通过 Web Animations API 内置的playbackRate属性实现，不需要修改原始duration参数，也不会重置动画当前状态：

1. 核心逻辑：播放速率属性Animation.playbackRate可以直接调整动画播放速度，默认值为1。值越大播放越快，值越小播放越慢，修改后立即生效，不会触发动画重置也不会出现视觉跳变。
2. 代码实现示例：
   你可以单独封装一个调速方法，不需要修改原有set_animation的逻辑：

/**
 * 修改当前运行中动画的播放速度
 * @param {number} new_duration 新一整轮动画的期望耗时，单位：秒
 */
update_animation_speed(new_duration) {
    // 没有运行中的动画直接返回
    if (!this.data_actors_self?.anim) return;

    // 获取原始配置的单轮总时长，单位为毫秒，转换为秒计算
    const base_duration_sec = this.data_actors_self.anim.effect.timing.duration / 1000;
    // 计算对应播放速率：原始时长 / 新时长 = 速率
    this.data_actors_self.anim.playbackRate = base_duration_sec / new_duration;
}

如果你确实需要直接修改duration参数而非调整速率，所有动画配置参数都存储在Animation.effect对象下，不能直接修改属性，需要调用updateTiming方法生效：

// 直接更新duration的写法，单位为毫秒
this.data_actors_self.anim.effect.updateTiming({
    duration: new_duration * 1000
});

补充说明 #

你之前读取this.data.anim.duration返回undefined是因为Animation对象本身不直接挂载配置参数，所有时序配置都存在anim.effect.timing下，且该对象下的属性默认只读，直接修改不会生效，必须通过updateTiming方法提交修改才会被浏览器应用。
对于你的精灵动画场景更推荐用playbackRate方案，不需要重新计算任何步进参数，完全不会打断当前的动画帧状态，正好符合你“无跳变、下一轮生效”的需求。

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