本教程将详细讲解如何利用javaScript的键盘事件（keydown和keyup）来精确控制css动画的播放与暂停。通过配置css动画的循环播放属性和初始暂停状态，结合javascript动态修改animation-play-state，实现用户按住任意键时动画运行，松开按键时动画暂停的交互效果，并确保动画可无限次循环。
1. 核心概念解析
要实现键盘控制动画播放与暂停，我们需要结合CSS动画的特性和JavaScript的事件处理能力。理解以下几个核心概念至关重要：
- CSS animation-play-state 属性： 这是控制CSS动画播放状态的关键。它可以被设置为 running (播放) 或 paused (暂停)。通过JavaScript动态修改此属性，我们可以控制动画的启停，且动画会在其当前帧暂停或恢复，而非重新开始。
- CSS animation-iteration-count: infinite： 该属性确保动画在播放时无限次循环，而不是只运行一次就停止。
- JavaScript keydown 事件： 当用户按下键盘上的任意键时触发。此事件在按键被按下的瞬间触发，并持续触发（如果按键一直按着）。
- JavaScript keyup 事件： 当用户松开键盘上的任意键时触发。此事件在按键从按下状态释放时触发一次。
2. 构建html结构
首先，我们需要一个承载动画的html元素。这里我们创建一个简单的球体，并在其内部放置一个文本元素，两者都将拥有独立的动画。
<div class="linje"> <div id="ball"> <p id="roter">161519</p> </div> </div>- div.linje 作为容器，定义了动画的可见区域。
- div#ball 是我们的主要动画元素，它将进行位移和旋转。
- p#roter 是球体内部的文本，它也将独立旋转。
3. 定义CSS动画与初始状态
在CSS中，我们将定义两个关键帧动画（@keyframes），分别用于球体的移动和内部文本的旋转。同时，我们将应用这些动画，并设置它们的初始状态为暂停，且循环播放。
立即学习“Java免费学习笔记（深入）”；
.linje { width: 1000px; height: 500px; border: 1px solid #ccc; /* 添加边框以便观察区域 */ margin: 20px auto; /* 居中显示 */ position: relative; overflow: hidden; } #ball { position: relative; top: 40px; left: 0; width: 100px; height: 100px; background-color: rgb(114, 240, 214); border-radius: 50%; /* 应用动画：名称 持续时间 缓动函数 循环次数 */ animation: rulle 4s linear infinite; /* 初始状态为暂停，等待用户交互 */ animation-play-state: paused; text-align: center; line-height: 100px; overflow: hidden; /* 确保内部旋转文本不溢出 */ display: flex; /* 使用flexbox居中文本 */ justify-content: center; align-items: center; } @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; display: inline-block; /* 确保transform生效 */ /* 文本的初始旋转状态 */ transform: rotate(0deg); } @keyframes roter { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }关键点说明：
- animation: rulle 4s linear infinite;：这是CSS动画的简写属性，定义了动画的名称、持续时间、缓动函数和循环次数。infinite 确保动画无限次循环播放。
- animation-play-state: paused;：此行至关重要，它确保页面加载时动画处于暂停状态，等待用户交互。
- #ball 中使用了 display: flex 配合 justify-content: center 和 align-items: center 来居中内部文本，而非简单的 line-height，这样更灵活。
4. 使用JavaScript控制动画播放状态
现在，我们将编写JavaScript代码来监听键盘事件，并根据按键状态动态修改元素的animation-play-state属性。
// 获取需要控制动画的dom元素 const ballElement = document.querySelector("#ball"); const roterElement = document.querySelector("#roter"); // 监听键盘按下事件 window.addEventListener("keydown", () => { // 当任意键按下时，将动画播放状态设置为“运行” // 确保动画从当前暂停位置恢复，而不是重新开始 ballElement.style.animationPlayState = "running"; roterElement.style.animationPlayState = "running"; }); // 监听键盘松开事件 window.addEventListener("keyup", () => { // 当任意键松开时，将动画播放状态设置为“暂停” // 确保动画在当前位置暂停 ballElement.style.animationPlayState = "paused"; roterElement.style.animationPlayState = "paused"; });代码解析：
- 通过 document.querySelector 获取到 ball 和 roter 两个DOM元素，它们是我们要控制动画的对象。
- window.addEventListener(“keydown”, …) 注册了一个全局的键盘按下事件监听器。当用户按下键盘上的任意键时，回调函数会被执行。
- 在 keydown 的回调函数中，我们将 ballElement 和 roterElement 的 style.animationPlayState 属性设置为 “running”，从而启动动画。
- window.addEventListener(“keyup”, …) 注册了一个全局的键盘松开事件监听器。当用户松开键盘上的任意键时，回调函数会被执行。
- 在 keyup 的回调函数中，我们将 ballElement 和 roterElement 的 style.animationPlayState 属性设置为 “paused”，从而暂停动画。
5. 注意事项与优化
- animation-play-state 与 animation 属性的区别：
- 直接修改 element.style.animation = “…” 会导致动画每次都从头开始播放，因为它重新应用了整个动画定义。
- 修改 element.style.animationPlayState 属性则允许动画在其当前帧暂停或恢复，这是实现流畅用户体验的关键。
- 全局事件监听： window.addEventListener 确保了无论用户焦点在页面的哪个位置，只要按下或松开键盘，动画都会响应。如果只需要在特定元素获得焦点时响应，可以将其绑定到该元素上。
- 动画平滑性： 示例中的 rulle 动画路径在某些关键帧之间可能不够平滑，这会影响视觉体验。在实际项目中，应仔细调整 @keyframes 中的属性值和缓动函数（如 ease-in-out 或自定义 cubic-bezier），以创建更自然、流畅的动画效果。
- 性能考量： 对于复杂的动画或大量动画元素，频繁的DOM操作可能会影响性能。在这种情况下，可以考虑使用 requestAnimationFrame 进行更精细的动画控制，或利用CSS will-change 属性（如 will-change: transform;）提前通知浏览器元素将发生变化，从而进行渲染优化。
- 用户体验反馈： 考虑为用户提供视觉反馈，例如在动画运行时改变元素的边框颜色，或者在页面上显示一个提示信息，告知用户如何控制动画。这有助于提升应用的易用性。
- 兼容性： 确保所使用的CSS属性和JavaScript API在目标浏览器环境中具有良好的兼容性。对于旧版浏览器，可能需要添加供应商前缀（如 -webkit-）。
6. 总结
通过本教程，我们学习了如何结合CSS的 animation-play-state 属性和JavaScript的 keydown/keyup 事件，实现一个响应式且可无限循环的动画控制系统。这种方法不仅能够实现按键控制动画的播放与暂停，还能确保动画在暂停后从中断处恢复，极大地提升了用户交互体验。掌握这一技巧，您将能更灵活地在Web应用中创建丰富的动态效果，为用户带来更生动、更具吸引力的交互体验。