为Pomodoro Timer添加顶部起始顺时针圆形进度动画求助

我正在使用HTML+CSS+JavaScript开发一款Pomodoro Timer（番茄计时器），希望实现从圆形顶部开始顺时针旋转直至完成整圆的进度动画。我尝试了多种代码写法，但始终无法正常实现效果。当前代码存在的问题是：计时器过半前无任何动画效果，过半后仅填充圆形上半部分，且动画从圆形左侧中部开始。

修改后的完整代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=EG+Garamond:wght@400;500;600;700&family=Fira+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="./style.css" />
    <title>Pomodoro App</title>
  </head>
  
  <body>
    <div class="app-container">
      <h1>pomodoro</h1>
      <div class="app-message">press start to begin</div>
      <div class="app-circle">
        <div class="circle-shape">
          <!-- 底层完整圆环 -->
          <div class="full-circle circle-bg"></div>
          <!-- 右侧进度遮罩 -->
          <div class="semi-circle right-side circle-mask" id="right-mask"></div>
          <!-- 左侧进度遮罩 -->
          <div class="semi-circle left-side circle-mask" id="left-mask"></div>
        </div>
        <div class="app-counter-box">
          <p><span class="minutes">25</span>:<span class="seconds">00</span></p>
        </div>
        <button class="btn-start">start</button>
        <button class="btn-pause">pause</button>
        <button class="btn-reset">reset</button>
        <div class="settings">
          <label>Session (minutes): <input type="number" id="session-length" value="25"></label>
          <label>Break (minutes): <input type="number" id="break-length" value="5"></label>
        </div>
      </div>
    </div>
  </body>
  
  <script src="./app.js"></script>
</html>

CSS #

html {
  font-family: 'Fira Sans', sans-serif;
  font-size: 20px;
  letter-spacing: 0.8px;
  min-height: 100vh;
  color: #d8e9ef;
  background-image: linear-gradient(-20deg, #025159 0%, #733b36 100%);
  background-size: cover;
}

h1 {
  margin: 0 auto 10px auto;
  color: #d8e9ef;
}

p {
  margin: 0;
}

.app-message {
  height: 20px;
  margin: 10px auto 20px auto;
}

.app-container {
  width: 250px;
  height: 420px;
  margin: 40px auto;
  text-align: center;
  border-radius: 5px;
  padding: 20px;
}

.app-circle {
  position: relative;
  margin: 0 auto;
  width: 200px;
  height: 200px;
}

.circle-shape {
  pointer-events: none;
  position: relative;
  width: 100%;
  height: 100%;
}

.full-circle {
  position: absolute;
  width: 188px;
  height: 188px;
  border: solid 6px #bf5239;
  border-radius: 50%;
  top: 0;
  left: 0;
}

.circle-bg {
  border-color: #e85a71;
}

.semi-circle {
  position: absolute;
  width: 100px;
  height: 200px;
  box-sizing: border-box;
  border: solid 6px;
  border-color: #025159; /* 和背景色一致，作为遮罩 */
  top: 0;
}

.left-side {
  left: 0;
  transform-origin: right center;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  border-right: none;
  z-index: 2;
  transform: rotate(-90deg);
}

.right-side {
  left: 100px;
  transform-origin: left center;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-left: none;
  z-index: 1;
  transform: rotate(-90deg);
}

.app-counter-box {
  font-family: 'Droid Sans Mono', monospace;
  font-size: 250%;
  position: relative;
  top: 50px;
  color: #d8e9ef;
  z-index: 3;
}

button {
  position: relative;
  top: 50px;
  font-size: 80%;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  background: none;
  outline: none;
  color: #d8e9ef;
  margin: 5px;
  z-index: 3;
}

button:hover {
  color: #90c0d1;
}

.btn-pause, .btn-reset {
  display: inline-block;
}

.settings {
  position: relative;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.settings label {
  margin: 5px 0;
  color: #d8e9ef;
}

JavaScript #

const bells = new Audio('./sounds/bell.wav'); 
const startBtn = document.querySelector('.btn-start');
const pauseBtn = document.querySelector('.btn-pause');
const resetBtn = document.querySelector('.btn-reset'); 
const session = document.querySelector('.minutes');
const sessionInput = document.querySelector('#session-length');
const breakInput = document.querySelector('#break-length');

let myInterval; 
let state = true;
let isPaused = false
let totalSeconds;
let initialSeconds;

const updateTimerDisplay = () => {
  const minuteDiv = document.querySelector('.minutes');
  const secondDiv = document.querySelector('.seconds');

  let minutesLeft = Math.floor(totalSeconds / 60);
  let secondsLeft = totalSeconds % 60;

  secondDiv.textContent = secondsLeft < 10 ? '0' + secondsLeft : secondsLeft;
  minuteDiv.textContent = `${minutesLeft}`;

  // Update the circle animation
  const rightMask = document.querySelector('#right-mask');
  const leftMask = document.querySelector('#left-mask');
  
  const duration = initialSeconds; // Total duration in seconds
  const elapsed = initialSeconds - totalSeconds;
  const percentage = (elapsed / duration) * 100;

  if (percentage <= 50) {
      // 前半段：右侧遮罩顺时针旋转，露出底层进度
      const rotateAngle = (-90) + (percentage / 50) * 180;
      rightMask.style.transform = `rotate(${rotateAngle}deg)`;
      leftMask.style.transform = 'rotate(-90deg)'; // 左侧遮罩保持初始位置
  } else {
      // 后半段：右侧遮罩完全打开，左侧遮罩顺时针旋转
      rightMask.style.transform = 'rotate(90deg)';
      const rotateAngle = (-90) + ((percentage - 50) / 50) * 180;
      leftMask.style.transform = `rotate(${rotateAngle}deg)`;
  }
};

const appTimer = () => {
  const sessionAmount = Number.parseInt(sessionInput.value)
  if (isNaN(sessionAmount) || sessionAmount <= 0) {
    alert('Please enter a valid session duration.');
    return;
  }
  session.textContent = sessionAmount;  // Update the session display

  if(state) {
    state = false;
    totalSeconds = sessionAmount * 60;
    initialSeconds = totalSeconds;

    myInterval = setInterval(() => {
      if (!isPaused) {
        totalSeconds--;
        updateTimerDisplay();

        if (totalSeconds <= 0) {
          bells.play();
          clearInterval(myInterval);
          startBreakTimer();
        }
      }
    }, 1000);
  } else {
    alert('Session has already started.');
  }
};

const pauseTimer = () => {
  if (!state) {
    isPaused = !isPaused;
    pauseBtn.textContent = isPaused ? 'resume' : 'pause';
  }
}

const startBreakTimer = () => {
  const breakAmount = Number.parseInt(breakInput.value);
  if (isNaN(breakAmount) || breakAmount <= 0) {
    alert('Please enter a valid break duration.');
    return;
  }
  totalSeconds = breakAmount * 60;
  initialSeconds = totalSeconds;

    myInterval = setInterval(() => {
    if (!isPaused) {
      totalSeconds--;
      updateTimerDisplay();

      if (totalSeconds <= 0) {
        bells.play();
        clearInterval(myInterval);
        state = true;
      }
    }
  }, 1000);
};

const resetTimer = () => {
  clearInterval(myInterval);
  state = true;
  isPaused = false;
  pauseBtn.textContent = 'pause';
  const minuteDiv = document.querySelector('.minutes');
  const secondDiv = document.querySelector('.seconds');
  minuteDiv.textContent = sessionInput.value;;
  secondDiv.textContent = '00';

  // Reset circle animation
  const rightMask = document.querySelector('#right-mask');
  const leftMask = document.querySelector('#left-mask');
  rightMask.style.transform = 'rotate(-90deg)';
  leftMask.style.transform = 'rotate(-90deg)';
}

startBtn.addEventListener('click', appTimer);
pauseBtn.addEventListener('click', pauseTimer);
resetBtn.addEventListener('click', resetTimer);

修改关键点说明 #

• HTML结构优化：添加底层完整圆环作为进度底色，简化半圆弧结构为两个遮罩层，通过遮罩旋转露出进度
• CSS调整：将半圆弧遮罩颜色设置为与背景一致，调整z-index层级确保交互元素在最上层，统一旋转中心设置
• JavaScript逻辑修正：重新计算旋转角度，前半段仅旋转右侧遮罩从顶部顺时针展开，后半段旋转左侧遮罩完成剩余半圈，修正初始和重置状态的遮罩位置

内容的提问来源于stack exchange，提问作者João Sacramento