SVG 动画教程 - 移动圆形示例

在这个教程中，我们将学习如何使用 SVG 来创建一个简单的动画，使一个圆形在屏幕上移动。

基础知识

在开始之前，请确保您已经熟悉了 SVG 基础知识。如果您还没有，可以先阅读SVG 基础教程。

动画效果

我们将创建一个简单的动画，使圆形在屏幕上沿直线移动。

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="50" fill="blue">
    <animate attributeName="cx" from="0" to="200" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

在上面的代码中，我们创建了一个 circle 元素，并使用 cx 属性定义了圆心的 x 坐标。<animate> 元素被用来创建动画效果，其中 attributeName 属性指定了需要动画化的属性，from 和 to 属性定义了动画开始和结束的值，dur 属性定义了动画的持续时间，repeatCount 属性定义了动画的重复次数。

修改动画

您可以通过修改 from、to、dur 和 repeatCount 属性来调整动画效果。

示例：圆形在垂直方向移动

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="50" fill="blue">
    <animate attributeName="cy" from="0" to="200" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

在上面的代码中，我们将 cx 属性更改为 cy，使圆形在垂直方向上移动。

扩展阅读

• SVG 动画教程 - 精灵动画
• SVG 动画教程 - 弹跳动画