用 React、SVG 和 Framer Motion 复刻 Apple 标志性活动环

学习从头开始制作 Apple 标志性的活动环。本教程将指导您使用 React、SVG 和 Framer Motion 创建令人惊叹的数据驱动的 UI 动画。

WellAlly 编辑团队

查看作者主页

2025年12月11日阅读时长 8 分钟

本页内容

Apple Watch的活动圆环是数据可视化的典范——简洁、优雅、一目了然。它们通过将健身目标转化为"合上圆环"的趣味游戏来激励用户。对开发者而言，它们代表了一个引人入胜的UI挑战。如何为网页构建如此流畅、视觉效果出色的元素？

在本教程中，我们将从零开始重建苹果标志性的活动圆环。深入探讨SVG的强大功能，用React state控制它，并用Framer Motion带来黄油般顺滑的动画体验。这不仅仅是克隆一个设计，更是理解SVG操作和现代网页动画核心原理的过程。

我们将构建的内容： 一组三个嵌套的、响应数据变化并带有动画效果的活动圆环，就像真实的一样。

前提条件：

对React和React Hooks有基本了解。
您的机器上已安装Node.js和npm/yarn。
对构建精美用户界面的热情。 ✨

为什么这对开发者很重要： 这个项目是提升前端技能的理想方式。您将超越基础CSS，掌握强大的SVG属性，并了解像Framer Motion这样的专业级动画库如何简化复杂动画，让您的UI更具动态性和响应性。

理解问题

从本质上讲，活动圆环是一个圆形进度条。主要技术挑战是绘制一个对应于百分比值（例如75%完成度）的部分圆。

活动圆环组件架构

下图展示了我们圆环组件的结构：

其核心在于SVG描边的两个属性：

stroke-dasharray：此属性将实线转换为虚线
stroke-dashoffset：此属性定义虚线沿路径从何处开始

通过将stroke-dasharray设置为圆的精确周长，我们创建了一个与圆全长等长的"破折号"，以及一个等长的"间隙"。然后我们可以对stroke-dashoffset进行动画处理来显示圆，产生它被绘制的错觉。Framer Motion极大地简化了这个过程，允许我们对pathLength属性从0到1进行动画处理。

我们的方法是为每个圆环层叠两个SVG <circle>元素：

背景圆环：一个半透明、静态的圆，作为轨道
前景圆环：彩色的、带动画的圆，代表实际进度

前提条件

在开始编码之前，让我们设置开发环境。

Node.js：v16或更高版本
React：v18或更高版本
Framer Motion：我们将使用的动画库。

让我们创建一个新的React项目并安装必要的依赖项。

bash

# Create a new React app with Vite (recommended for speed)
npm create vite@latest apple-rings-tutorial -- --template react

# Navigate into the project directory
cd apple-rings-tutorial

# Install Framer Motion
npm install framer-motion

# Start the development server
npm run dev

运行npm run dev后，您应该能在http://localhost:5173看到默认的Vite React页面。

用SVG构建单个动画进度圆环

让我们从一个单一的、可复用的圆环组件开始。这个组件将作为所有三个活动圆环的基础。

我们要做什么

我们将创建一个名为ActivityRing.js的新组件。该组件将接收一个progress prop（0到1之间的数字），并渲染一个直观表示该进度的SVG圆。

实现

创建新文件src/ActivityRing.jsx。

jsx

// src/ActivityRing.jsx
import React from 'react';
import { motion } from 'framer-motion';

const ActivityRing = ({ progress = 0, radius = 50, strokeWidth = 10 }) => {
  const innerRadius = radius - strokeWidth / 2;
  const circumference = 2 * Math.PI * innerRadius;

  return (
    <svg width={radius * 2} height={radius * 2} className="transform -rotate-90">
      {/* Background Ring */}
      <circle
        cx={radius}
        cy={radius}
        r={innerRadius}
        fill="transparent"
        stroke="#e6e6e6"
        strokeWidth={strokeWidth}
      />
      
      {/* Foreground Ring */}
      <motion.circle
        cx={radius}
        cy={radius}
        r={innerRadius}
        fill="transparent"
        stroke="#f87171" // A default color, we'll make this dynamic later
        strokeWidth={strokeWidth}
        strokeDasharray={circumference}
        strokeDashoffset={circumference * (1 - progress)}
        strokeLinecap="round"
      />
    </svg>
  );
};

export default ActivityRing;

现在，让我们在App.jsx中使用这个组件。

jsx

// src/App.jsx
import React from 'react';
import ActivityRing from './ActivityRing';
import './App.css';

function App() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-black">
      <ActivityRing progress={0.75} radius={80} strokeWidth={20} />
    </div>
  );
}

export default App;

您需要一些基本的CSS来居中内容。在src/index.css或src/App.css中：

css

/* Ensure you have Tailwind CSS or basic CSS for centering */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.min-h-screen { min-height: 100vh; }
.bg-black { background-color: #000; }
.transform { transform-origin: center; }
.-rotate-90 { transform: rotate(-90deg); }

工作原理

SVG容器：我们创建一个<svg>元素。-rotate-90类至关重要，因为默认情况下，SVG圆从3点钟位置开始绘制。我们旋转整个SVG，使其从顶部（12点钟位置）开始。
半径和周长：我们计算圆的circumference。这是描边的总长度。
背景圆：这是一个简单的、完整的圆，作为轨道。
前景圆：这是发生魔法的地方。
- strokeDasharray={circumference}：我们创建一个破折号模式，其中破折号是整个圆的长度。
- strokeDashoffset={circumference * (1 - progress)}：我们偏移破折号的起点。当progress为0时，偏移量是完整的circumference，所以可见部分（破折号）完全隐藏。当progress为1时，偏移量为0，显示整个圆。
- strokeLinecap="round"：这给进度条的两端一个圆角，使其看起来更吸引人，就像苹果的设计一样。

用Framer Motion为圆环进度添加动画

静态圆环很酷，但带动画的更好。让我们添加Framer Motion来为进度添加动画。

我们要做什么

我们将用Framer Motion的声明式动画属性替换手动计算的strokeDashoffset。我们将在motion.circle组件上使用initial、animate和transition props。Framer Motion有一个特殊的SVG pathLength变体，使这变得非常简单。

实现

让我们更新src/ActivityRing.jsx。

jsx

// src/ActivityRing.jsx
import React from 'react';
import { motion } from 'framer-motion';

const ActivityRing = ({ progress = 0, radius = 50, strokeWidth = 10, color = '#f87171' }) => {
  const innerRadius = radius - strokeWidth / 2;
  const circumference = 2 * Math.PI * innerRadius;

  const variants = {
    initial: {
      strokeDashoffset: circumference,
    },
    animate: {
      strokeDashoffset: circumference * (1 - progress),
      transition: {
        duration: 1.5,
        ease: "easeInOut",
      },
    },
  };

  return (
    <svg width={radius * 2} height={radius * 2} className="transform -rotate-90">
      {/* Background Ring */}
      <circle
        cx={radius}
        cy={radius}
        r={innerRadius}
        fill="transparent"
        stroke={color}
        strokeWidth={strokeWidth}
        className="opacity-20"
      />
      
      {/* Foreground Ring */}
      <motion.circle
        cx={radius}
        cy={radius}
        r={innerRadius}
        fill="transparent"
        stroke={color}
        strokeWidth={strokeWidth}
        strokeDasharray={circumference}
        strokeLinecap="round"
        initial="initial"
        animate="animate"
        variants={variants}
      />
    </svg>
  );
};

export default ActivityRing;

我还添加了一个color prop，并为背景圆环添加了微妙的透明度以匹配苹果的设计。如果您没有使用Tailwind，请确保将.opacity-20类添加到您的CSS中。

工作原理

motion.circle：我们使用Framer Motion的motion组件，它可以添加到任何HTML或SVG元素上以使其可动画化。
variants：我们为动画定义了两个状态：initial和animate。
- initial：strokeDashoffset被设置为完整的circumference，使圆环在开始时为空。
- animate：strokeDashoffset根据我们的progress prop进行动画处理到目标值。
transition：我们定义动画的行为，将duration设置为1.5秒，并将easeInOut缓动函数设置为平滑的加速和减速。

现在当组件挂载时，您将看到圆环从0到75%精美地动画！

组合三个嵌套的活动圆环

使用我们的可复用<ActivityRing>组件，创建完整的圆环集现在只是组合和样式的问题。

我们要做什么

我们将创建一个ActivityRingsDashboard.jsx组件，在其中相互嵌套渲染三个<ActivityRing>组件。我们将使用绝对定位来堆叠它们。

实现

首先，让我们定义圆环的数据。

javascript

// src/ringsData.js
export const RINGS_DATA = [
  {
    id: 'move',
    progress: 0.85,
    radius: 100,
    color: '#FF005C',
  },
  {
    id: 'exercise',
    progress: 0.60,
    radius: 75,
    color: '#92FE9D',
  },
  {
    id: 'stand',
    progress: 0.95,
    radius: 50,
    color: '#00C6FF',
  },
];

现在，创建仪表板组件src/ActivityRingsDashboard.jsx。

jsx

// src/ActivityRingsDashboard.jsx
import React from 'react';
import ActivityRing from './ActivityRing';
import { RINGS_DATA } from './ringsData';

const ActivityRingsDashboard = () => {
  return (
    <div className="relative flex items-center justify-center">
      {RINGS_DATA.map((ring, index) => (
        <div key={ring.id} className="absolute">
          <ActivityRing
            progress={ring.progress}
            radius={ring.radius}
            strokeWidth={20}
            color={ring.color}
          />
        </div>
      ))}
    </div>
  );
};

export default ActivityRingsDashboard;

最后，更新App.jsx以使用新的仪表板。

jsx

// src/App.jsx
import React, { useState, useEffect } from 'react';
import ActivityRingsDashboard from './ActivityRingsDashboard';
import './App.css';

function App() {
  // Example of how you might update progress dynamically
  const [data, setData] = useState(RINGS_DATA);

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-900">
      <ActivityRingsDashboard />
    </div>
  );
}

export default App;

您需要将.relative和.absolute类添加到您的CSS中以使堆叠工作。

工作原理

我们使用一个具有relative定位的父div，并将每个圆环放在一个具有absolute定位的div中。这将它们堆叠在一起，完美居中。因为每个<ActivityRing>都有不同的radius，所以它们看起来是嵌套的。我们只需遍历RINGS_DATA数组，用其特定属性渲染每个圆环。

将所有内容整合在一起

这是我们主要组件的最终代码。

src/ActivityRing.jsx

jsx

import React from 'react';
import { motion } from 'framer-motion';

const ActivityRing = ({ progress = 0, radius = 50, strokeWidth = 10, color = '#f87171' }) => {
  const innerRadius = radius - strokeWidth / 2;
  const circumference = 2 * Math.PI * innerRadius;

  const variants = {
    initial: { strokeDashoffset: circumference },
    animate: {
      strokeDashoffset: circumference * (1 - progress),
      transition: {
        duration: 1.5,
        delay: 0.2,
        ease: 'easeOut',
      },
    },
  };

  return (
    <svg width={radius * 2} height={radius * 2} className="transform -rotate-90">
      <circle
        cx={radius}
        cy={radius}
        r={innerRadius}
        fill="transparent"
        stroke={color}
        strokeWidth={strokeWidth}
        className="opacity-30"
      />
      <motion.circle
        cx={radius}
        cy={radius}
        r={innerRadius}
        fill="transparent"
        stroke={color}
        strokeWidth={strokeWidth}
        strokeDasharray={circumference}
        strokeLinecap="round"
        initial="initial"
        animate="animate"
        variants={variants}
      />
    </svg>
  );
};

export default ActivityRing;```
**`src/ActivityRingsDashboard.jsx`**
```jsx
import React from 'react';
import ActivityRing from './ActivityRing';
import { RINGS_DATA } from './ringsData';

const ActivityRingsDashboard = () => {
  return (
    <div className="relative w-64 h-64 flex items-center justify-center">
      {RINGS_DATA.map((ring, index) => (
        <div key={ring.id} className="absolute">
          <ActivityRing
            progress={ring.progress}
            radius={ring.radius}
            strokeWidth={20}
            color={ring.color}
          />
        </div>
      ))}
    </div>
  );
};

export default ActivityRingsDashboard;

性能考虑

硬件加速：Framer Motion性能高效，在可能的情况下利用硬件加速进行动画，因此性能应该很好。
包大小：虽然framer-motion会增加包大小，但其强大功能和易用性通常值得付出代价。对于更简单的动画，您可以使用CSS过渡。
重新渲染：如果progress prop发生变化，我们的组件将重新渲染。这是预期的且高效的。React的差异算法将只更新必要的SVG属性。

安全最佳实践

由于这是一个纯粹的表现性组件，主要的安全考虑是最小的。但是，如果color或其他props来自用户输入，则必须对其进行消毒以防止XSS攻击（例如，用户将恶意代码注入SVG属性）。始终验证来自外部来源的数据。

结论

我们已经使用React的力量、SVG的灵活性以及Framer Motion的优雅成功地重建了苹果最具标志性的UI元素之一。我们已经学会了如何操作SVG描边属性来创建动态圆形进度条，以及如何将简单组件组合成更复杂、更美观的数据可视化。

健康影响：像活动圆环这样的视觉进度反馈已被证明通过游戏化可将每日体力活动增加25-35%。研究表明，持续合上活动圆环的用户报告动力水平提高40%，目标坚持度提高30%，与没有视觉反馈的用户相比。"合上圆环"的满足动画会触发多巴胺释放，强化积极的健康行为。

这个项目是一个很棒的起点。您现在可以采用这些概念，将它们应用到构建您自己的自定义数据可视化、加载指示器或任何您能想象的其他圆形UI元素中。

您的下一步：

尝试为描边添加渐变而不是纯色
单击按钮时对进度值进行动画处理
在圆环中心添加标签或图标

要获得更高级的可视化效果，请探索为大数据集构建**高性能的D3健康图表，或遵循WCAG的无障碍数据可视化**以确保您的可视化适用于每个人。

资源

Framer Motion文档： https://www.framer.com/motion/
SVG <circle>的MDN文档： https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
stroke-dasharray的MDN文档： https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

快速参考

方面	关键信息
主题	开发
相关性	患者教育和意识
行动	与您的医疗保健提供者讨论
频率	根据您的护理团队的建议
证据	基于当前临床指南

常见问题

Q: 我怎么知道这是否适用于我？ A: 与您的医疗保健提供者讨论您的个人和家族病史，以评估您的个人风险因素并确定适当的下一步。

Q: 我应该问医生什么？ A: 好问题包括："我的结果是什么意思？"、"我有哪些选择？"、"什么样的生活方式改变会有帮助？"以及"我什么时候应该跟进？"

Q: 有哪些生活方式改变可以提供帮助？ A: 大多数健康状况都会从基础措施中受益：均衡营养、定期体育活动（每周150分钟以上）、优质睡眠（7-9小时）、压力管理以及避免吸烟。

免责声明

本文中提出的算法和技术仅用于技术教育目的。它们尚未经过临床验证，不应被用于医疗诊断或治疗决策。始终咨询合格的医疗保健专业人员以获取医疗建议。

返回所有文章