svg动画之：animateMotion

马黑黑 · 发表于 2022-9-10 11:06

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-9-10 11:09 编辑

我们在时间一帖里提到过，svg 可以直接驱动文本沿着既定路径移动。试看如下效果，蓝色边框的区域是 svg 画布，文字沿着直线路径来回移动。代码和效果如下：

<text x="0" y="5" style="font: bold 2em sans-serif; stroke: red; fill: none;">月是故乡明

</text>

</svg>

animateMotion 可以直接写路径，代码中的蓝色部分就是，上例用 path 写出了一个从 10 开始到 440结束的水平路径，路径中的 z 表示闭合路径，这是文本来回移动的依据（运动总是照着路径的，路径闭合意味着头尾相连，直线路径不会头尾相连，就往复循环）。

animateMotion 还有几个重要参数，这里仅就上例做解释：dur 必须，运动周期时长；repeatCount，重复次数，可用正整数，也可以用例中的数值（无限数值），不设置此参数时运动一次就停下来。

animateMotion 必须被包裹在调用运动的标签内。上面的例子中，它放在 <text> 和 </text> 之内。可能有朋友会问：那么，像圆、矩形、线条之类的svg元素，它们就不能使用 animateMotion 运动了？因为它们是自闭合标签！答案会令大家满意：能用，自闭合标签在使用 animateMotion 运动时，写成有起始符、收尾符的标签即可！请看例子，一个矩形代替上面的文本运动：

</rect>

</svg>

通常，rect 标签都是写成 <rect x="10" y="10" .... /> 这样的自闭合方式，为了调用 animateMotion 就必须包裹它，所以也能有终止标签符号 </rect>!

马黑黑 · 发表于 2022-9-10 11:07

本帖最后由马黑黑于 2022-9-10 13:10 编辑

将 animateMotion 所使用的路径写在自己代码内不是官方建议的方法，但在路径极简且无需反复调用路径时，可以考虑。官方建议 animateMotion 使用路径的方法是先设计路径，再使用 mpath 标签指定所使用的路径。以l类似一楼的直线路径为例，我们来看看如何实现：

</animateMotion>

</rect>

</svg>

mpath 以 animateMotion 的子标签出现，只负责为 animateMotion 指定前面设计的 path 路径。

在上面的例子里，矩形的 y 值为什么设定为 -20 即矩形的高度的一半？根据 rect 的（xy）坐标，当它处于静止状态时，它的位置又在哪里？又，当矩形根据 animateMotion 的设定投入运动中，它为什么在路径x线Y轴的正中央？为了展示这一点，这里将 animateMotion 的 repeatCount 设置为 5，运行 5 次后动画会停下来，然后可以理解：矩形的 xy坐标的设置，当基于路径运动时应参照路径的某些情形（如初始path坐标或xy坐标中全部或某一个轴）进行设定，当矩形是静止展现时，则应以 svg 的左上角（0,0）做基点设定矩形的位置。

迄今为止，我们还没有令运动对象以曲线作为运动路径。这里，设计一条三次贝塞尔曲线，先看效果：

代码：

</animateMotion>

</rect>

</svg>

蓝色代码，d="M 0 0 C 260 300, 400 20, 600 200"，M 0 0 ，画笔起笔处也是曲线开始点的坐标，C 是三次贝塞尔曲线指令（CurveTo的缩写），所带的三组参数，最后一组是曲线的终点坐标，第一、第二组是两个控制点坐标。这个路径没有用小写字母 z 闭合，因为这条曲线闭合了构不成合理的运行轨道。

animateMotion 代码中还有一个重要的设置，rotate="auto"，这是叫矩形能够根据路径自动调整“车身”的意思，没有这句，矩形行进的效果没那么好。