教程总览

我们将学习三种制作动态时钟图标的方法,难度递增：

动态时钟图标制作教程
（图片来源网络，侵删）

  1. 纯 CSS 动态时钟 (最简单)

    • 原理：利用 CSS 的 transform: rotate() 和 animation 属性，让时钟的指针持续旋转。
    • 优点：代码量极少，无需 JavaScript，性能好。
    • 缺点：指针的旋转是匀速的，不能根据真实时间变化（但可以做成无限循环的动态效果）。

  2. JavaScript + SVG 动态时钟 (最推荐)

    • 原理：使用 JavaScript 获取当前真实时间，然后计算每个指针的旋转角度，并动态更新 SVG 元素的样式。
    • 优点：完全准确，指针实时反映当前时间，结合 SVG，图标可以无限放大而不失真。
    • 缺点：需要少量 JavaScript 代码。

  3. Lottie 动态时钟 (最专业)

    • 原理：使用 Lottie 库来播放一个在 After Effects 中制作的矢量动画。
    • 优点：可以实现极其复杂、流畅的动画效果，文件体积小，跨平台一致性好。
    • 缺点：需要额外的学习成本（After Effects 和 Lottie）。

准备工作

无论选择哪种方法,你都需要一个基础的时钟图标，我们使用 SVG 格式，因为它最适合做图标和动画。

动态时钟图标制作教程
（图片来源网络，侵删）

基础 SVG 时钟代码：

这是一个包含表盘、时针、分针和秒针的简单 SVG，你可以复制这段代码保存为 clock.svg，或者直接在你的 HTML 文件中使用。

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 表盘 -->
  <circle cx="100" cy="100" r="98" fill="white" stroke="#333" stroke-width="4"/>
  <!-- 中心点 -->
  <circle cx="100" cy="100" r="5" fill="#333"/>
  <!-- 时针 (较短、较粗) -->
  <line id="hour-hand" x1="100" y1="100" x2="100" y2="50" stroke="#333" stroke-width="6" stroke-linecap="round"/>
  <!-- 分针 (中等) -->
  <line id="minute-hand" x1="100" y1="100" x2="100" y2="30" stroke="#333" stroke-width="4" stroke-linecap="round"/>
  <!-- 秒针 (较长、较细) -->
  <line id="second-hand" x1="100" y1="100" x2="100" y2="20" stroke="red" stroke-width="2" stroke-linecap="round"/>
</svg>

关键点：

  • 我们为每个指针设置了 id（如 hour-hand），这样我们就可以通过 JavaScript 或 CSS 来精确地控制它们。
  • 所有指针的旋转中心点都在 (100, 100)，即表盘的中心，这是后续动画的关键。

纯 CSS 动态时钟

这种方法让指针以恒定速度旋转,创造出一种“正在走动”的视觉效果，非常适合作为加载动画或装饰性图标。

动态时钟图标制作教程
（图片来源网络，侵删）

步骤 1：修改 SVG

为了让 CSS 能控制旋转，我们需要给 SVG 中的指针元素添加一个 CSS 类，并设置它们的 transform-origin（旋转原点）为表盘中心。

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- ... 表盘和中心点保持不变 ... -->
  <!-- 时针 (添加 class) -->
  <line class="hand" id="hour-hand" x1="100" y1="100" x2="100" y2="50" stroke="#333" stroke-width="6" stroke-linecap="round"/>
  <!-- 分针 (添加 class) -->
  <line class="hand" id="minute-hand" x1="100" y1="100" x2="100" y2="30" stroke="#333" stroke-width="4" stroke-linecap="round"/>
  <!-- 秒针 (添加 class) -->
  <line class="hand" id="second-hand" x1="100" y1="100" x2="100" y2="20" stroke="red" stroke-width="2" stroke-linecap="round"/>
</svg>

步骤 2：编写 CSS

在 HTML 文件的 <style> 标签或外部 CSS 文件中，添加以下样式：

.hand {
  /* 将旋转原点设置在表盘中心 */
  transform-origin: 100px 100px; 
  /* 初始状态，让指针从12点方向开始 */
  transform: rotate(0deg);
}
/* 时针动画：12秒转一圈 (为了演示效果，实际是12小时一圈) */
#hour-hand {
  animation: rotate 12s linear infinite;
}
/* 分针动画：1分钟转一圈 (为了演示效果，实际是60分钟一圈) */
#minute-hand {
  animation: rotate 60s linear infinite;
}
/* 秒针动画：1秒转一圈 */
#second-hand {
  animation: rotate 1s linear infinite;
}
/* 定义旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

效果： 现在打开你的 HTML 文件，你会看到一个秒针、分针、时针都在独立旋转的动态时钟。

JavaScript + SVG 动态时钟 (最常用)

这种方法能根据真实的系统时间来驱动指针,准确性最高。

步骤 1：准备 HTML 和 SVG

在 HTML 文件中，放置我们准备好的 SVG 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JS Dynamic Clock</title>
    <style>
        /* 可以给 SVG 加一些基本样式 */
        svg {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <!-- ... 使用上面准备好的 SVG 代码 ... -->
        <circle cx="100" cy="100" r="98" fill="white" stroke="#333" stroke-width="4"/>
        <circle cx="100" cy="100" r="5" fill="#333"/>
        <line id="hour-hand" x1="100" y1="100" x2="100" y2="50" stroke="#333" stroke-width="6" stroke-linecap="round"/>
        <line id="minute-hand" x1="100" y1="100" x2="100" y2="30" stroke="#333" stroke-width="4" stroke-linecap="round"/>
        <line id="second-hand" x1="100" y1="100" x2="100" y2="20" stroke="red" stroke-width="2" stroke-linecap="round"/>
    </svg>
    <script>
        // JavaScript 代码将放在这里
    </script>
</body>
</html>

步骤 2：编写 JavaScript

在 <script> 标签内，添加以下代码：

function setClock() {
    // 1. 获取当前时间
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    // 2. 计算每个指针的旋转角度
    // 秒针: (60秒 = 360度) => 1秒 = 6度
    const secondDegrees = ((seconds / 60) * 360) + 90; // +90是为了让12点方向对应0度
    // 分针: (60分钟 = 360度) + (秒针带来的分钟偏移)
    const minuteDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
    // 时针: (12小时 = 360度) + (分钟带来的小时偏移)
    const hourDegrees = ((hours / 12) * 360) + ((minutes / 60) * 30) + 90;
    // 3. 获取指针元素并应用旋转
    const secondHand = document.getElementById('second-hand');
    const minuteHand = document.getElementById('minute-hand');
    const hourHand = document.getElementById('hour-hand');
    secondHand.style.transform = `rotate(${secondDegrees}deg)`;
    minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
// 初始化时钟
setClock();
// 每秒更新一次时钟
setInterval(setClock, 1000);

代码解释：

  1. setClock() 函数负责获取时间、计算角度和应用样式。
  2. 角度计算：我们使用 (部分 / 整体) * 360 的公式。
    • + 90：在 SVG 中，0度是3点钟方向，我们想让12点方向作为起始点，所以需要将整个坐标系顺时针旋转90度，这个 +90 是最简单粗暴的修正方法。
    • 连续性：在计算分针和时针时，我们加入了秒针和分针带来的微小偏移，这样指针的移动就是平滑的，而不是每分钟/每小时才跳动一次。
  3. setInterval(setClock, 1000)：这句代码是关键，它告诉浏览器每隔1000毫秒（即1秒）就执行一次 setClock 函数，从而实现实时更新。

Lottie 动态时钟 (专业级)

Lottie 是一个由 Airbnb 开发的库，用于渲染由 After Effects 制作的矢量动画。

步骤 1：制作 Lottie 文件

  1. 安装软件：下载并安装 Adobe After Effects 和 Bodymovin 插件。
  2. 制作动画：在 After Effects 中创建一个新的合成，绘制你的时钟图标。
  3. 制作动画：在时间轴上为时针、分针、秒针的关键帧设置位置（或旋转）动画，模拟真实走动。
  4. 导出：安装 Bodymovin 插件后，通过 文件 > 导出 > 使用 Bodymovin 导出，选择 JSON 格式，得到一个 .json 文件（clock.json）。

步骤 2：在网页中使用 Lottie

  1. 引入 Lottie 库：在 HTML 的 <head> 中引入 Lottie 的 Web 库。

    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

  2. 使用 <lottie-player>：在 <body> 中，像使用视频标签一样使用它。

    <lottie-player
  src="path/to/your/clock.json" <!-- 替换成你的 JSON 文件路径 -->
  background="transparent"
  speed="1"
  style="width: 200px; height: 200px;"
  loop
  autoplay>
</lottie-player>

优点：

  • 动画效果可以非常复杂和精细。
  • 文件体积小,因为它是矢量数据。
  • 可以通过 speed 属性控制播放速度，通过 loop 和 autoplay 控制播放行为。

总结与建议

方法 优点 缺点 适用场景
纯 CSS 极简、高性能、无 JS 依赖 不基于真实时间，动画固定 装饰性图标、加载动画
JS + SVG 准确、实时、灵活、矢量可缩放 需要少量 JS 代码 网站/App 的状态栏时钟、设置页面的时间显示
Lottie 动画效果顶级、跨平台一致、文件小 制作流程复杂，需要 AE 和插件 需要复杂动画效果的品牌图标、App 启动页、交互反馈

对于绝大多数前端开发需求,方法二（JavaScript + SVG）是最佳选择，它兼具了准确性、性能和实现的便捷性，希望这个详细的教程能帮助你成功制作出动态时钟图标！