17370845950

本文详解如何解决呼吸训练应用中 css 动画无法从起始点（scale(1)）正确重置的问题，通过将 css 动画替换为基于 `transition` + css 自定义属性的可控方案，实现 inhale/exhale 文字与缩放动画严格同步。

在构建呼吸训练类交互功能时，一个常见却棘手的问题是：CSS @keyframes 动画在多次触发或重置后，无法保证每次都从初始状态（如 transform: scale(1)）开始播放。这会导致视觉错位——例如圆圈未完全恢复原大小就进入“吸气”阶段，同时文字（Inhale/Exhale）显示时机错乱，严重影响用户体验与生理节奏引导的准确性。

根本原因在于：CSS 动画（animation）具有独立的时间轴和播放状态，直接修改 animation-duration 或切换 class 并不能强制重置其内部计时器；而 animation-fill-mode: forwards 会保留结束帧样式，进一步加剧状态残留问题。

✅ 推荐解决方案：用 CSS transition 替代 animation，配合 CSS 自定义属性（CSS Custom Properties）动态控制过渡时长，并通过 JS 切换 class 精确驱动状态变化。

✅ 核心实现逻辑

1. 移除所有 animation 相关声明，改用 transition 声明在 .circle 上：

   .circle {
     transform: scale(1);
     transition: transform var(--transition-duration) ease-in-out;
   }
   .circle.inhale {
     transform: scale(1.2);
   }

   ⚠️ 注意：transition 仅在 CSS 属性值发生变化时触发，且始终从当前计算值平滑过渡到目标值——这天然保证了“每次都是从当前状态出发”，避免了动画时间轴漂移。

2. 使用 :root 定义可编程的过渡时长变量：

   :root {
     --transition-duration: 0ms;
   }

   通过 JavaScript 修改该变量，即可实时更新所有 .circle 元素的过渡速度，无需操作 DOM 样式或触发 reflow。

3. JS 控制流程重构（关键优化点）：

   • 在 selectExercise() 中：重置 --transition-duration 为 0，清除 .inhale 类，并设文字为 "Ready"，确保圆圈处于静止初始态；
   • 在 startAnimation() 中：先设置 --transition-duration 为 inhaleTime（如 5000ms），再通过 classList.add('inhale') 触发放大（Inhale）；
   • 使用嵌套 setTimeout 精确协调文字与状态切换（Inhale → Exhale → Inhale…），利用 transitionend 事件虽更健壮，但此处定时逻辑已足够清晰可控。

✅ 完整代码片段（关键部分）

// JS：动态控制过渡时长与状态
const root = document.documentElement;

function selectExercise(exerciseId) {
  // ...隐藏其他 exercise...
  const circles = document.querySelectorAll(".circle");
  circles.forEach(circle => {
    root.style.setProperty('--transition-duration', '0ms');
    circle.textContent = "Ready";
    circle.classList.remove("inhale");
  });
}

function startAnimation(circleId, duration, totalCycles, timerId) {
  const circle = document.getElementById(circleId);
  const inhaleTime = duration / 2;
  const exhaleTime = duration / 2;

  // 同步更新 CSS 变量
  root.style.setProperty('--transition-duration', `${inhaleTime}ms`);

  let cycles = 0;
  function animateCycle() {
    circle.textContent = "Inhale";
    circle.classList.add("inhale");

    setTimeout(() => {
      circle.textContent = "Exhale";
      circle.classList.remove("inhale");

      setTimeout(() => {
        cycles++;
        if (cycles < totalCycles) {
          animateCycle(); // 下一循环
        }
      }, inhaleTime); // 注意：此处是 inhaleTime，因上一步已耗时 exhaleTime
    }, exhaleTime);
  }

  animateCycle();
}

/* CSS：声明 transition 而非 animation */
.circle {
  width: 200px;
  height: 200px;
  background-color: #4BC0C0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  transform: scale(1);
  transition: transform var(--transition-duration) ease-in-out;
  margin-bottom: 5px;
}

.circle.inhale {
  transform: scale(1.2);
}

⚠️ 注意事项与最佳实践

• 避免 animation-play-state: paused/resumed：它无法重置动画起点，仅暂停/继续当前进度；
• 慎用 animation: none 临时清除：虽可中断动画，但可能丢失状态，且需额外 reflow 才生效；
• 推荐 transition 的三大优势：① 状态驱动（class 控制）、② 可中断可重入、③ 与 JS 时序高度解耦；
• 若需更高精度（如响应用户中途暂停/继续），建议监听 transitionend 事件并结合 requestAnimationFrame 做微调；
• 所有 setTimeout 时间需严格匹配 CSS transition-duration，单位统一为毫秒（ms），避免浮点误差累积。

通过这一重构，你的呼吸动画将真正实现「所见即所得」：每次点击「Start」，圆圈都从完美静止的 scale(1) 开始，文字与形变严格同步，为用户提供科学、可靠、沉浸式的呼吸训练体验。