本教程详细讲解如何利用javascript的键盘事件（keydown和keyup）来精确控制css动画的播放状态。我们将学习如何通过动态修改animation-play-state属性，实现动画在按键按下时运行、松开时暂停，并使其无限循环播放，从而创建交互式的网页动画效果。
1. 核心概念解析
要实现通过键盘控制CSS动画的运行与暂停，我们需要结合以下几个关键技术点：
- CSS animation-play-state 属性： 这是CSS动画的核心控制属性，它可以设置为 running（运行）或 paused（暂停）。通过JavaScript动态修改此属性，可以精确地控制动画的播放状态，而不会影响动画的其他属性（如持续时间、迭代次数等）。
- JavaScript keydown 事件： 当用户按下键盘上的任意键时触发。我们将利用此事件来启动动画。
- JavaScript keyup 事件： 当用户释放键盘上的任意键时触发。我们将利用此事件来暂停动画。
- CSS animation-iteration-count: infinite： 此属性用于设置动画的循环次数。将其设置为 infinite 可以使动画无限次循环播放，满足动画不停止的需求。
2. 实践：构建键盘控制动画
我们将通过一个“旋转球”的例子来演示如何实现这一功能。
2.1 HTML 结构
首先，我们需要一个简单的HTML结构来承载我们的动画元素。这里我们创建一个包含一个可旋转球体的容器。
<div class="linje">
<div id="ball">
<p id="roter">161519</p>
</div>
</div>- div.linje：作为动画的舞台或容器。
- div#ball：代表我们的“球体”，它将进行移动和旋转动画。
- p#roter：球体内部的文本，它将独立进行旋转动画，模拟球体内部元素的旋转。
2.2 CSS 样式与动画定义
接下来，定义元素的样式和关键帧动画。重要的是，在CSS中预先设置动画并将其初始播放状态设为 paused，同时确保动画无限循环。
立即学习“前端免费学习笔记（深入）”；
.linje {
width: 1000px;
height: 500px;
}
#ball {
position: relative;
top: 40px;
left: 0;
width: 100px;
height: 100px;
background-color: rgb(114, 240, 214);
border-radius: 50%;
/* 定义动画：名称、持续时间、时间函数、无限循环 */
animation: rulle 4s infinite linear;
/* 初始状态为暂停 */
animation-play-state: paused;
text-align: center;
line-height: 100px;
}
/* 定义球体移动和旋转的关键帧动画 */
@keyframes rulle {
0% {
top: 40px;
left: 0;
transform: rotate(0deg);
}
12.5% {
top: 40px;
left: 50px;
transform: rotate(45deg);
}
25% {
top: 40px;
left: 100px;
transform: rotate(90deg);
}
37.5% {
top: 40px;
left: 150px;
transform: rotate(135deg);
}
50% {
top: 40px;
left: 200px;
transform: rotate(180deg);
}
62.5% {
top: 40px;
left: 250px;
transform: rotate(225deg);
}
75% {
top: 40px;
left: 300px;
transform: rotate(270deg);
}
87.5% {
top: 40px;
left: 350px;
transform: rotate(315deg);
}
100% {
top: 40px;
left: 250px;
transform: rotate(360deg);
}
}
#roter {
/* 定义动画：名称、持续时间、时间函数、无限循环 */
animation: roter 4s linear infinite;
/* 初始状态为暂停 */
animation-play-state: paused;
}
/* 定义内部文本的旋转关键帧动画 */
@keyframes roter {
0% {
/* 保持原样 */
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}关键点：
- 在 #ball 和 #roter 的 animation 属性中都加入了 infinite 关键字，确保动画无限循环。
- 通过 animation-play-state: paused; 将动画的初始状态设置为暂停，防止页面加载后动画立即播放。
2.3 JavaScript 交互逻辑
最后，编写JavaScript代码来监听键盘事件并控制动画的播放状态。
// 获取需要控制动画的DOM元素
const ball = document.querySelector("#ball");
const roter = document.querySelector("#roter");
// 监听 'keydown' 事件：当任意键按下时，设置动画播放状态为 'running'
window.addEventListener("keydown", () => {
ball.style.animationPlayState = "running";
roter.style.animationPlayState = "running";
});
// 监听 'keyup' 事件：当任意键释放时，设置动画播放状态为 'paused'
window.addEventListener("keyup", () => {
ball.style.animationPlayState = "paused";
roter.style.animationPlayState = "paused";
});关键点：
- 使用 window.addEventListener 监听全局的 keydown 和 keyup 事件，这样无论用户按下哪个键，动画都会响应。
- 直接修改元素的 style.animationPlayState 属性，这是控制CSS动画播放状态的最佳实践。它只改变动画的播放状态，而不会重置动画的其他属性。
3. 注意事项与最佳实践
- 避免重复设置 animation 属性： 原始代码中在 keydown 事件中重新设置了 ball.style.animation = "..."。这种做法会重置整个动画，导致动画从头开始而不是从当前暂停的位置继续。正确的做法是仅修改 animation-play-state。
- 选择合适的事件： keydown 和 keyup 是实现按住播放、松开暂停的关键。如果只需要按一次切换状态，可以考虑 keypress (已废弃，推荐使用 keydown 并判断 event.repeat) 或更复杂的逻辑。
- 动画平滑性： 确保 keyframes 定义的动画路径是平滑的。如果动画在某些点出现跳跃，需要检查关键帧之间的过渡是否自然。例如，本教程中的 rulle 动画在 100% 处的 left 值与 87.5% 处的 left 值之间存在回退，这可能导致动画在循环时显得不那么流畅。根据实际需求调整关键帧。
- 多元素控制： 如果有多个动画元素需要同时控制，如本例中的 #ball 和 #roter，确保对每个元素都应用相同的 animation-play-state 逻辑。
- 用户体验： 考虑为用户提供视觉反馈，例如在动画运行时改变元素的边框颜色或添加提示文本，以增强交互体验。
4. 总结
通过本教程，我们学习了如何利用JavaScript的 keydown 和 keyup 事件，结合CSS的 animation-play-state 属性以及 animation-iteration-count: infinite，实现对CSS动画的精确键盘控制。这种方法不仅功能强大，而且代码简洁高效，是创建交互式网页动画的有效途径。理解并应用这些核心概念，将帮助您在前端开发中实现更丰富的用户交互体验。
