虚幻引擎官网的Loading动画具备流畅的动态效果，同时支持点击暂停的交互，这种实现方式既提升了视觉效果，也增加了用户的可控性。下面我们一步步拆解实现逻辑。
一、基础Loading动画的CSS实现
首先我们需要先完成基础的旋转Loading动画，这里使用常见的圆环旋转效果，通过@keyframes定义旋转关键帧，再通过animation属性绑定到元素上。
/* 定义旋转动画关键帧 */
@keyframes rotate_loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 基础Loading容器样式 */
.loading_container {
width: 80px;
height: 80px;
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
/* 绑定旋转动画，持续1秒，无限循环，线性运动 */
animation: rotate_loading 1s linear infinite;
cursor: pointer;
}
/* 暂停状态的样式 */
.loading_paused {
/* 暂停动画运行 */
animation-play-state: paused;
}
二、HTML结构搭建
HTML部分只需要一个用于展示Loading动画的容器元素即可，后续通过JavaScript操作这个元素的状态。
<div class="loading_container" id="loadingBox"></div>
三、JavaScript点击暂停逻辑实现
核心的交互逻辑是通过JavaScript监听容器的点击事件，切换元素的animation-play-state状态，同时用一个状态变量记录当前的动画运行状态，避免重复切换。
// 获取Loading容器元素
const loadingBox = document.getElementById('loadingBox');
// 定义状态标记，true表示正在运行，false表示已暂停
let isRunning = true;
// 监听点击事件
loadingBox.addEventListener('click', function() {
if (isRunning) {
// 当前正在运行，点击后暂停
loadingBox.classList.add('loading_paused');
isRunning = false;
} else {
// 当前已暂停，点击后恢复运行
loadingBox.classList.remove('loading_paused');
isRunning = true;
}
});
四、效果验证与扩展
完成上述代码后，在浏览器中打开页面，可以看到圆环持续旋转，点击圆环后动画暂停，再次点击动画恢复运行，和虚幻引擎官网的点击暂停效果逻辑一致。
如果需要实现更复杂的动画暂停效果，比如暂停时显示进度提示，可以在loading_paused样式中添加额外的样式规则，或者在点击事件中添加对应的DOM操作逻辑，比如显示暂停提示文本。
注意：animation-play-state属性兼容性较好，主流现代浏览器都支持，如果需要适配更老的浏览器版本，可以通过切换animation属性值为none来实现暂停效果，但这种方式会重置动画进度，需要根据实际需求选择。
扩展：重置动画进度的方法
如果需要在暂停后重置动画到初始状态，可以通过重新设置animation属性实现，示例代码如下：
// 重置动画到初始状态
function resetLoading() {
// 先移除动画绑定
loadingBox.style.animation = 'none';
// 触发重排，让样式生效
loadingBox.offsetHeight;
// 重新绑定动画
loadingBox.style.animation = 'rotate_loading 1s linear infinite';
// 恢复运行状态标记
isRunning = true;
// 移除暂停样式
loadingBox.classList.remove('loading_paused');
}
Unreal_EngineLoading_animationclick_pauseJavaScriptCSS_animation修改时间：2026-07-17 12:51:21