HTML5动画的播放速度控制、倍速调节以及暂停恢复功能，是前端交互开发中非常常见的需求，实现方式主要分为CSS动画控制和Canvas配合requestAnimationFrame控制两大类，两种方式的实现逻辑有显著差异。
一、CSS动画的播放控制
CSS动画通过animation相关属性实现，控制播放速度的核心属性是animation-playback-rate，该属性可以直接设置动画的播放倍率，默认值为1，值越大播放速度越快，小于1则播放速度变慢，设置为0时动画暂停。
1. 基础实现代码
首先定义基础动画样式：
/* 定义基础动画 */
@keyframes move_animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}
/* 应用动画的元素 */
.animate_box {
width: 50px;
height: 50px;
background-color: #409eff;
animation: move_animation 2s linear infinite;
/* 默认播放倍率为1 */
animation-playback-rate: 1;
}
2. 倍速调节与暂停恢复控制
通过JavaScript修改animation-playback-rate的值即可实现速度控制，暂停时设置为0，恢复时设置回原来的倍率即可：
// 获取动画元素
const box = document.querySelector('.animate_box');
// 当前播放倍率，默认1
let current_rate = 1;
// 倍速调节函数，传入倍率值
function change_speed_rate(rate) {
current_rate = rate;
// 设置动画播放倍率
box.style.animationPlaybackRate = current_rate;
}
// 暂停动画
function pause_animation() {
box.style.animationPlaybackRate = 0;
}
// 恢复动画
function resume_animation() {
box.style.animationPlaybackRate = current_rate;
}
3. 控制按钮示例
配合简单的HTML按钮即可实现交互：
<div class="animate_box"></div> <div class="control_btns"> <button onclick="change_speed_rate(0.5)">0.5倍速</button> <button onclick="change_speed_rate(1)">原速</button> <button onclick="change_speed_rate(2)">2倍速</button> <button onclick="pause_animation()">暂停</button> <button onclick="resume_animation()">恢复</button> </div>
二、requestAnimationFrame实现的动画控制
Canvas动画或者手动通过requestAnimationFrame控制的逐帧动画，没有现成的倍率属性，需要通过控制每帧的时间间隔来实现速度调节，暂停恢复则通过停止和重启requestAnimationFrame的调用来实现。
1. 基础动画实现
先实现一个基础的移动动画：
// 获取canvas元素和上下文
const canvas = document.getElementById('animate_canvas');
const ctx = canvas.getContext('2d');
// 初始位置
let x = 0;
// 每帧移动距离，默认2
let step = 2;
// 动画是否运行
let is_running = true;
// 动画帧ID
let anim_frame_id = null;
// 绘制函数
function draw() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制矩形
ctx.fillStyle = '#409eff';
ctx.fillRect(x, 50, 50, 50);
}
// 动画循环函数
function animate_loop() {
if (!is_running) return;
// 更新位置
x += step;
// 边界判断，超出后回到起点
if (x > canvas.width) {
x = 0;
}
draw();
// 请求下一帧
anim_frame_id = requestAnimationFrame(animate_loop);
}
// 启动动画
animate_loop();
2. 倍速调节实现
倍速调节本质是修改每帧的移动步长，步长越大，相同帧率下移动速度越快：
// 基础步长
const base_step = 2;
// 修改倍率函数
function change_canvas_rate(rate) {
// 步长 = 基础步长 * 倍率
step = base_step * rate;
}
3. 暂停与恢复实现
暂停时取消requestAnimationFrame的调用，恢复时重新启动循环：
// 暂停动画
function pause_canvas_animation() {
is_running = false;
// 取消未执行的动画帧
if (anim_frame_id) {
cancelAnimationFrame(anim_frame_id);
}
}
// 恢复动画
function resume_canvas_animation() {
if (is_running) return;
is_running = true;
// 重新启动动画循环
animate_loop();
}
三、两种方式对比
两种实现方式的特点和适用场景如下：
| 实现方式 | 优势 | 劣势 | 适用场景 |
|---|---|---|---|
| CSS动画控制 | 代码简单，原生属性支持，性能较好 | 仅适用于CSS实现的动画，复杂逐帧逻辑难以实现 | 简单的DOM元素过渡、旋转、位移等动画 |
| requestAnimationFrame控制 | 灵活度高，适合复杂逐帧动画、Canvas动画 | 需要手动处理时间、帧逻辑，代码量更大 | Canvas游戏动画、复杂数据可视化动画 |
四、注意事项
- CSS动画的
animation-playback-rate属性兼容性较好，现代浏览器都支持，不需要添加前缀。 - requestAnimationFrame的帧率跟随浏览器刷新率，一般是60帧每秒，修改步长时需要注意不要出现移动过快导致视觉卡顿的问题。
- 暂停动画后如果需要记录当前状态，需要额外保存动画的当前进度，恢复时从进度处继续，避免动画跳帧。
实际开发中可以根据动画类型选择合适的控制方式，简单的DOM动画优先使用CSS动画控制，复杂的交互动画选择requestAnimationFrame实现更灵活的控制。
HTML5动画animation_playback_raterequestAnimationFrame动画暂停动画恢复修改时间：2026-07-11 01:30:34