虚幻引擎官网的加载动画是如何实现暂停和播放功能的？

实现原理概述

虚幻引擎官网的加载动画暂停播放功能，本质是通过CSS的animation-play-state属性控制动画的运行状态，再结合JavaScript监听用户交互事件，动态修改该属性的值来实现切换效果。整个实现过程分为三个部分：搭建动画的HTML结构、定义加载动画的CSS样式与动画关键帧、编写控制暂停播放的JavaScript逻辑。

HTML结构搭建

首先需要创建加载动画的基础DOM结构，这里模拟虚幻引擎官网常见的圆环加载动画结构，包含一个动画容器和控制按钮：

<div class="loading-container">
  <div class="loading-circle"></div>
  <p class="loading-text">加载中...</p>
</div>
<button class="control-btn">暂停动画</button>

CSS动画样式定义

接下来通过CSS定义加载动画的样式和关键帧动画，同时设置动画默认的播放状态为运行：

/* 加载容器样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 40px 0;
}

/* 圆环加载动画样式 */
.loading-circle {
  width: 60px;
  height: 60px;
  border: 4px solid #f0f0f0;
  border-top-color: #0a6ed1; /* 虚幻引擎标志性的蓝色 */
  border-radius: 50%;
  /* 定义动画名称、时长、循环方式 */
  animation: spin 1.2s linear infinite;
  /* 默认动画播放状态为运行 */
  animation-play-state: running;
}

/* 加载文字样式 */
.loading-text {
  color: #666;
  font-size: 14px;
  margin: 0;
}

/* 控制按钮样式 */
.control-btn {
  padding: 8px 24px;
  background-color: #0a6ed1;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

/* 旋转动画关键帧 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 暂停状态的圆环样式，可选修改边框颜色增强反馈 */
.loading-circle.paused {
  border-top-color: #999;
}

JavaScript交互逻辑编写

最后通过JavaScript监听控制按钮的点击事件，动态切换动画的播放状态，同时更新按钮的显示文本：

// 获取DOM元素
const loadingCircle = document.querySelector('.loading-circle');
const controlBtn = document.querySelector('.control-btn');

// 定义当前动画是否运行的状态标识
let isAnimationRunning = true;

// 按钮点击事件监听
controlBtn.addEventListener('click', function() {
  if (isAnimationRunning) {
    // 暂停动画：修改animation-play-state为paused，添加暂停样式类
    loadingCircle.style.animationPlayState = 'paused';
    loadingCircle.classList.add('paused');
    controlBtn.textContent = '播放动画';
  } else {
    // 播放动画：修改animation-play-state为running，移除暂停样式类
    loadingCircle.style.animationPlayState = 'running';
    loadingCircle.classList.remove('paused');
    controlBtn.textContent = '暂停动画';
  }
  // 切换状态标识
  isAnimationRunning = !isAnimationRunning;
});

实现细节说明

在实际的虚幻引擎官网实现中，还会有更多细节优化：比如动画暂停时加载文字同步更新为"已暂停"，播放时恢复"加载中"；可能会通过CSS变量统一管理动画的时长和颜色，方便主题切换；如果页面有多个加载动画实例，会通过事件委托或者封装成类的方式来复用控制逻辑。但核心的暂停播放控制逻辑和上述示例是一致的，都是通过操作animation-play-state属性实现。

扩展应用

这种控制方式不仅适用于加载动画，还可以应用到所有CSS动画场景中，比如页面滚动触发的入场动画、交互反馈动画等。如果需要兼容更老的浏览器，可以把animation-play-state的修改方式改为切换类名，在CSS中通过类名控制该属性的值，避免直接操作内联样式带来的样式优先级问题。

Unreal_EngineCSS_animationJavaScriptanimation_play_state修改时间：2026-07-05 18:06:12