掌握键盘事件控制CSS动画的运行与暂停

本教程详细讲解如何利用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结构来承载我们的动画元素。这里我们创建一个包含一个可旋转球体的容器。

    
        
161519
    

• 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动画的精确键盘控制。这种方法不仅功能强大，而且代码简洁高效，是创建交互式网页动画的有效途径。理解并应用这些核心概念，将帮助您在前端开发中实现更丰富的用户交互体验。