按键控制CSS动画，JavaScript实现播放暂停

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JavaScript控制动画：按键播放暂停CSS动画》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

本教程将详细讲解如何利用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），分别用于球体的移动和内部文本的旋转。同时，我们将应用这些动画，并设置它们的初始状态为暂停，且循环播放。

.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";
});

代码解析：

1. 通过 document.querySelector 获取到 ball 和 roter 两个DOM元素，它们是我们要控制动画的对象。
2. window.addEventListener("keydown", ...) 注册了一个全局的键盘按下事件监听器。当用户按下键盘上的任意键时，回调函数会被执行。
3. 在 keydown 的回调函数中，我们将 ballElement 和 roterElement 的 style.animationPlayState 属性设置为 "running"，从而启动动画。
4. window.addEventListener("keyup", ...) 注册了一个全局的键盘松开事件监听器。当用户松开键盘上的任意键时，回调函数会被执行。
5. 在 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应用中创建丰富的动态效果，为用户带来更生动、更具吸引力的交互体验。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~