用 SVG 打造流畅的路径动画

前端

2023-10-15 19:18:39

在 SVG 动画的领域里，路径动画（也称为轨迹动画）扮演着举足轻重的角色。它赋予元素沿着指定路径运动的能力，开辟了无限的动画可能性。

随着 SVG 的日益普及，路径动画正被广泛应用于各种场景中，从网站设计到交互式数据可视化。它不仅提供了令人惊叹的视觉效果，还为用户创造了引人入胜的体验。

然而，要掌握路径动画的艺术，需要深刻理解 SVG 的原理和语法。在本篇文章中，我们将深入探讨 SVG 路径动画的奥秘，逐步指导您创建令人难忘的动画效果。

SVG 路径：动画的基础

SVG 路径由一组命令组成，这些命令定义了元素在二维空间中的形状和轮廓。这些命令包括：

M（移动到）：将元素移动到指定点。
L（直线到）：在元素当前位置和指定点之间绘制一条直线。
C（曲线到）：在元素当前位置和指定点之间绘制一条贝塞尔曲线。
Z（闭合）：将元素的路径闭合，形成一个封闭的形状。

通过组合这些命令，您可以创建各种形状和路径。对于路径动画来说，了解这些命令至关重要，因为它决定了元素沿着路径运动的方式。

创建路径动画

要创建路径动画，我们需要使用 SVG 的 <animateMotion> 元素。此元素允许我们指定元素沿特定路径移动的动画参数。

<animateMotion> 元素包含以下属性：

path：指定元素将沿着其移动的路径。
dur：指定动画的持续时间。
repeatCount：指定动画重复的次数。
begin：指定动画开始的时间。

例如，下面的代码将创建一个沿圆形路径移动的元素：

<path id="circle" d="M100,100 a50,50 0 1,0 100,0" fill="none" stroke="blue" stroke-width="2"></path>
<animateMotion path="url(#circle)" dur="5s" repeatCount="indefinite"></animateMotion>

自定义路径动画

除了基本的路径动画外，我们还可以通过以下方式自定义动画效果：

速度： 使用 keyPoints 属性指定动画的运动速度。
旋转： 使用 rotate 属性使元素在沿路径移动时旋转。
偏移： 使用 offset 属性在路径上偏移元素的位置。

通过玩转这些参数，您可以创建高度动态和复杂的动画。

实例：用 SVG 制作一个钟摆

现在，让我们将我们对路径动画的理解付诸实践。我们将创建一个用 SVG 制作的钟摆动画。

<svg width="200" height="200">
  <defs>
    <path id="pendulum" d="M100,100 l0,-50" fill="none" stroke="black" stroke-width="2"></path>
  </defs>
  <animateMotion path="url(#pendulum)" dur="2s" repeatCount="indefinite" keyPoints="0;0.5;1" keyTimes="0;0.5;1" rotate="auto-reverse"></animateMotion>
</svg>