本文介绍如何在不打断动画流程的前提下动态调整 CSS 旋转动画的播放速率，通过 JavaScript 的 playbackRate 属性替代修改 animation-duration，确保地球模型旋转位置平滑过渡、无跳变。
本文介绍如何在不打断动画流程的前提下动态调整 css 旋转动画的播放速率，通过 javascript 的 `playbackrate` 属性替代修改 `animation-duration`，确保地球模型旋转位置平滑过渡、无跳变。
在 Web 动画开发中，直接修改 animation-duration 会强制浏览器重置并重启动画，导致当前动画进度丢失（例如地球背景图的 background-position 突然跳转），破坏视觉连续性。真正的解决方案是复用现有动画实例，并动态调节其播放速率——这正是 Animation.playbackRate 的核心价值。
playbackRate 是一个可读写的数字属性（默认为 1.0），表示动画相对于原时长的播放倍速。例如：
- 原动画 duration: 20s，设 playbackRate = 10 → 实际播放时长变为 2s；
- 设 playbackRate = 0.5 → 实际时长变为 40s；
- 关键优势：动画时间轴（currentTime）和当前状态（如 background-position）完全保留，无重置、无跳帧。
以下是完整实现代码（已优化兼容性与健壮性）：
<div id="globe" class="globe"></div>
.globe {
width: 300px;
height: 300px;
background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg);
border-radius: 50%;
background-size: 600px;
box-shadow: 0px 0px 15px 7px #fff4, inset 0px 0px 20px 7px #0008;
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from { background-position: 0 0; }
to { background-position: 600px 0; }
}
function onGlobeClick() {
const globe = document.getElementById('globe');
// 获取当前正在运行的动画（注意：getAnimations() 返回 Animation 数组）
const animations = globe.getAnimations();
if (animations.length === 0) return;
const anim = animations[0];
// 切换至高速：20s → 2s，即 playbackRate = 10
anim.playbackRate = 10;
// 1秒后恢复常速（playbackRate = 1）
setTimeout(() => {
anim.playbackRate = 1;
}, 1000);
}
document.getElementById('globe').addEventListener('click', onGlobeClick);
✅ 关键注意事项：
- getAnimations() 是现代标准 API（Chrome 43+、Firefox 48+、Safari 16.4+、Edge 79+），旧版浏览器需降级方案（如 fallback 到 classList + animationend 监听，但无法完全避免跳变）；
- 务必在调用 getAnimations() 前确保动画已启动（CSS 中已声明 animation）；
- 若存在多个动画（如同时有旋转+缩放），需通过 anim.effect.getAnimationName() 过滤目标动画；
- playbackRate 支持小数（如 0.8 慢速）、负数（反向播放），灵活性远超 animation-duration。
总结：要实现真正“无缝”的动画速率切换，必须跳出 CSS 属性重写的思维定式，转向对动画实例的精细化控制。playbackRate 不仅解决了旋转跳变问题，也为复杂交互动画（如悬停加速、拖拽变速）提供了高性能、低开销的实现路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
