← 返回动效实验室
活动圆环 Rings
同心圆环动画：进入时从零画到当前值，中心数字同步增长，超出目标的部分叠加深色。拖动滑杆改数值，看圆环与数字平滑过渡。
实时 Demo
内环 128% 超出加深 · 外环/中环随滑杆联动
内环固定 128% 演示"超出部分叠加深色"：目标 100% 用基础色，超出的 28% 用深色段盖上去
效果拆解
- 核心是 stroke-dasharray：周长 C = 2πr，画 p% 就设
dasharray = C、dashoffset = C×(1-p)；rotate(-90) 让起点在 12 点方向。
- 从零画起：初始 dashoffset = C，用 rAF 补间到目标值（或直接 CSS transition 0.8s），中心数字用同一个补间函数驱动，保证"环和数字永远同步"。
- 超出加深：叠两层圆——基础色画到 min(p,100)%，深色段从 100% 起点画到 p%（用 dasharray 的第二个值 + offset 控制区间）。
- 数字滚动：补间函数里
Math.round(value × progress) 写进 <text>，tabular-nums 防数字宽度抖动。
- 缓动：easeOutCubic 最像"进度感"；想带点冲劲用 easeOutBack（y 略过 1 再落回）。
AI 提示词
做一个同心活动圆环：多个 SVG 圆环共享圆心，进入视口时从零画到当前值——用 stroke-dasharray 等于周长、stroke-dashoffset 从周长补间到 周长×(1-进度)，起点 rotate(-90) 对准 12 点方向；中心数字与圆环用同一个补间函数驱动保持同步增长，easeOutCubic 0.8s；超过目标（100%）的部分叠加一条深色圆环段盖在基础色之上；只动 stroke-dashoffset 与文本，保证 GPU 合成。做一个同心活动圆环：多个 SVG 圆环共享圆心，进入视口时从零画到当前值——用 stroke-dasharray 等于周长、stroke-dashoffset 从周长补间到 周长×(1-进度)，起点 rotate(-90) 对准 12 点方向；中心数字与圆环用同一个补间函数驱动保持同步增长，easeOutCubic 0.8s；超过目标（100%）的部分叠加一条深色圆环段盖在基础色之上；只动 stroke-dashoffset 与文本，保证 GPU 合成。
- 改环的数量/颜色/粗细只是改 r 和 stroke-width，动画逻辑完全复用。
- 提示词内置 dasharray/dashoffset 的完整算法，AI 一步到位。