利用SVG动画实现半圆形进度条

2024-01-04 03:06:32

在现代Web开发中，用户界面（UI）设计扮演着至关重要的角色，因为它决定了用户与网站或应用程序的互动体验。其中，动画效果可以显著增强UI的可视吸引力和可用性。本文将深入探讨如何使用可伸缩矢量图形（SVG）动画实现半圆形进度条，这是一个在各种数字产品中常见的UI元素。

SVG画布与路径定义

SVG是一种基于XML的矢量图形格式，特别适合用于创建可缩放且交互式的高质量图形。要创建半圆形进度条，首先需要创建一个SVG画布并定义一条路径来表示圆弧。

<svg width="200" height="200">
  <path id="arc" d="M 100 100 A 100 100 0 0 1 100 0" stroke="black" stroke-width="10" fill="none" />
</svg>

在这个例子中，width和height属性设置了SVG画布的大小，path元素定义了半圆的路径。d属性指定了一条从(100, 100)开始、半径为100、从0度旋转到180度的圆弧路径。

动画效果

接下来，需要使用CSS或JavaScript添加动画效果，以使进度条在半圆路径上平滑移动。可以使用CSS的animation属性或JavaScript的SVGElement.animate()方法。

CSS动画：

@keyframes progress {
  from {
    stroke-dashoffset: 200;
  }
  to {
    stroke-dashoffset: 0;
  }
}

#arc {
  animation: progress 2s linear infinite;
}

JavaScript动画：

const arc = document.getElementById('arc');

arc.animate([
  { strokeDashoffset: 200 },
  { strokeDashoffset: 0 }
], {
  duration: 2000,
  easing: 'linear',
  iterations: Infinity
});