React模拟时钟秒针如何实现持续顺时针转动？

问题描述 #

我使用React构建了一个模拟时钟，但秒针存在异常：初始为顺时针转动，当到达59秒位置后，会逆时针转动至1秒位置，之后再次恢复顺时针转动。需要实现秒针持续顺时针转动。

原React代码 #

import React, { useEffect, useState } from 'react';
import './AnalogClock.css';

const AnalogClock = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      const newTime = new Date();
      setTime(newTime);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  const getRotation = (unit, max) => {
    const value = time[`get${unit}`]();
    let rotation = (value * 360) / max;

    if (unit === 'Seconds') {
      const seconds = value + time.getMilliseconds() / 1000;
      rotation = (seconds * 6) % 360;

      if (rotation < 0) {
        rotation += 360;
      }
    }

    return {
      transform: `translate(-50%, -100%) rotate(${rotation}deg)`,
    };
  };

  const renderNumbers = () => {
    const numbers = [];

    for (let i = 1; i <= 12; i++) {
      const angle = (i * 30) * (Math.PI / 180);
      const numberStyle = {
        left: `calc(50% + ${Math.sin(angle) * 140}px)`,
        top: `calc(50% - ${Math.cos(angle) * 140}px)`,
      };
      numbers.push(
        <div key={i} className="number" style={numberStyle}>
          {i}
        </div>
      );
    }

    return numbers;
  };

  return (
    <div className="clock">
      {renderNumbers()}
      <div className="hour-hand" style={getRotation('Hours', 12)}></div>
      <div className="minute-hand" style={getRotation('Minutes', 60)}></div>
      <div
        className="second-hand"
        style={
          time.getSeconds() === 59
            ? { ...getRotation('Seconds', 60), transition: 'none' }
            : getRotation('Seconds', 60)
        }
      ></div>
      <div className="center-circle"></div>
    </div>
  );
};

export default AnalogClock;

附CSS代码 #

.clock {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #e0e0e0;
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.2), -20px -20px 40px rgba(255, 255, 255, 0.7);
    padding: 20px;
  }
  
  .hour-hand,
  .minute-hand,
  .second-hand {
    position: absolute;
    background-color: #333;
    transform-origin: bottom center;
    transition: transform 0.5s ease-in-out;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), -4px -4px 8px rgba(255, 255, 255, 0.7);
  }
  
  .hour-hand {
    width: 8px;
    height: 90px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%) translateX(-1px);
    border-radius: 8px 8px 0 0;
  }
  
  .minute-hand {
    width: 6px;
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%) translateX(-1px);
    border-radius: 6px 6px 0 0;
  }
  
  .second-hand {
    width: 4px;
    height: 130px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%) translateX(-1px);
    border-radius: 4px 4px 0 0;
    background-color: #ff0000;
  }
  
  .center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background-color: #333;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.7);
  }
  .number {
    position: absolute;
    font-size: 29px;
    font-weight: bold;
    color: #333;
    transform: translate(-50%, -50%);
  }

问题原因及解决方案 #

原因分析 #

问题核心在于秒针的旋转值计算逻辑：

• 当秒数从59跳转到0时，旋转值会从接近360度变为0度，CSS过渡会选择最短路径执行动画，也就是逆时针旋转354度回到初始位置，而非继续顺时针旋转6度。
• 原代码中在59秒时关闭过渡的处理，无法解决下一秒旋转值跳变触发反向过渡的问题。

修改后的代码 #

import React, { useEffect, useState } from 'react';
import './AnalogClock.css';

const AnalogClock = () => {
  // 维护累计秒数，确保旋转值持续递增
  const [totalSeconds, setTotalSeconds] = useState(() => {
    const now = new Date();
    return now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
  });

  useEffect(() => {
    const interval = setInterval(() => {
      setTotalSeconds(prev => prev + 1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  const getRotation = (unit) => {
    let rotation;
    switch(unit) {
      case 'Hours':
        // 基于累计秒数计算，实现小时针平滑转动
        rotation = (totalSeconds / 43200) * 360;
        break;
      case 'Minutes':
        rotation = (totalSeconds / 3600) * 360;
        break;
      case 'Seconds':
        // 旋转值持续累加，实现持续顺时针转动
        const currentMs = new Date().getMilliseconds();
        rotation = (totalSeconds + currentMs / 1000) * 6;
        break;
      default:
        rotation = 0;
    }

    return {
      transform: `translate(-50%, -100%) rotate(${rotation}deg)`,
    };
  };

  const renderNumbers = () => {
    const numbers = [];

    for (let i = 1; i <= 12; i++) {
      const angle = (i * 30) * (Math.PI / 180);
      const numberStyle = {
        left: `calc(50% + ${Math.sin(angle) * 140}px)`,
        top: `calc(50% - ${Math.cos(angle) * 140}px)`,
      };
      numbers.push(
        <div key={i} className="number" style={numberStyle}>
          {i}
        </div>
      );
    }

    return numbers;
  };

  return (
    <div className="clock">
      {renderNumbers()}
      <div className="hour-hand" style={getRotation('Hours')}></div>
      <div className="minute-hand" style={getRotation('Minutes')}></div>
      <div className="second-hand" style={getRotation('Seconds')}></div>
      <div className="center-circle"></div>
    </div>
  );
};

export default AnalogClock;

关键修改点 #

1. 累计秒数替代当前时间：初始化时计算当天0点到现在的总秒数，之后每秒累加1，确保旋转值持续递增，不会出现从360跳回0的情况。
2. 持续递增的旋转计算：秒针直接用(totalSeconds + 毫秒偏移) *6，旋转值一直累加，CSS的rotate()支持超过360度的数值，会自动处理为持续顺时针旋转。
3. 移除过渡特殊处理：不再需要在59秒时关闭过渡，旋转值的持续递增会让过渡始终按顺时针方向执行。

内容的提问来源于stack exchange，提问作者robert.b