在SVG中用`<animateMotion>`让图像沿路径移动

2023-11-09 20:50:35

探索 <animateMotion> 元素：开启沿路径动画之旅

在 SVG 动画的奇妙世界中，<animateMotion> 元素扮演着至关重要的角色。它赋予了我们让对象沿着自定义路径行进的能力，为动画增添了活力和动感。准备好踏上一次迷人的旅程，深入了解 <animateMotion> 的奥秘吧！

什么是 <animateMotion>？

<animateMotion> 元素是 SVG 动画中的核心成员，它允许我们沿着一条路径对元素进行动画处理。它的语法如下：

<animateMotion attributeName="motion" path="M 0,0 L 100,100" dur="2s" fill="freeze"/>

attributeName 指定要应用动画的属性，通常是 "motion"，它控制元素沿路径的移动。
path 定义动画的路径，可以用任何有效的 SVG 路径来表示。
dur 设定动画的持续时间，以秒为单位。
fill 确定动画的填充模式，"freeze" 表示动画结束后元素保持在路径上的最终位置。

<animateMotion> 的属性

<animateMotion> 元素提供了丰富的属性，让我们可以精细地控制动画行为：

path : 指定动画的路径。
dur : 设置动画的持续时间。
fill : 设定动画的填充模式。
keyPoints : 定义动画的关键点，用于标记元素在路径上的特定位置。
keyTimes : 指定关键点的时间，决定元素在路径上的移动速度。
calcMode : 确定动画的计算模式，有 "linear"（恒定速度）、"paced"（两端慢中间快）和 "discrete"（瞬间移动）可供选择。
repeatCount : 指定动画重复的次数。
begin : 设置动画的开始时间。
end : 设定动画的结束时间。

如何使用 <animateMotion>？

创建 <animateMotion> 动画涉及以下步骤：

创建 SVG 路径： 设计一条作为动画轨迹的 SVG 路径。
添加 <animateMotion> 元素： 将 <animateMotion> 元素添加到要动画化的元素中，并设置 path 属性。
指定动画属性： 设置 dur、fill 和其他所需的属性以控制动画行为。

一个示例

让我们创建一个沿圆形路径移动的圆形动画：

<svg width="100%" height="100%">
  <circle cx="50" cy="50" r="25">
    <animateMotion path="M 50,50 m -25,0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0" dur="2s" fill="freeze"/>
  </circle>
</svg>