svg animateMotion
时间: 2024-01-28 12:04:28 浏览: 33
SVG 的 `animateMotion` 元素是用于在 SVG 动画中控制元素的运动路径的。它可以让元素沿着指定的路径进行动画。使用 `animateMotion` 元素,你可以定义起点、终点以及路径,然后通过指定动画持续时间和重复次数来控制元素的运动。
以下是一个示例代码,展示了如何使用 `animateMotion` 元素来创建一个简单的运动动画:
```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path id="motionPath" d="M10,100 C10,30 190,30 190,100" fill="none" stroke="blue" />
<circle cx="10" cy="100" r="8">
<animateMotion dur="4s" repeatCount="indefinite">
<mpath href="#motionPath" />
</animateMotion>
</circle>
</svg>
```
在这个例子中,我们定义了一个路径 `motionPath`,然后创建了一个小圆圈元素 `circle`。通过将 `animateMotion` 元素嵌套在 `circle` 元素内部,我们将动画应用到了圆圈上。
`animateMotion` 元素的属性 `dur` 定义了动画的持续时间,这里设置为 4 秒。`repeatCount` 属性设置为 `indefinite`,表示动画会无限重复播放。
通过在 `animateMotion` 元素内部使用 `mpath` 元素,并设置其 `href` 属性为 `motionPath`,我们将路径应用到了动画中。
这样,圆圈元素就会沿着定义的路径进行往返运动,持续 4 秒,并且会不断重复播放动画。
希望这个例子能帮助你理解如何使用 `animateMotion` 元素来创建 SVG 动画。如果有更多问题,请随时提问!