svg之 animateMotion 路径动画（一）

以下效果，小矩形绕着横躺的8字闭合路径秀步，比牙签腿的模特走T台更为优雅且极具魅力。如果打开页面后错过了一睹其芳容的机会，没关系，鼠标指针移到小矩形，它依然会屁颠屁颠地去跳八字步舞——可以永远驱使它这么做，它不知疲倦。

自动转身

rotate="auto"

之前讲过的 animate 和 animateTransform 动画，animate 动画通过持续改变元素的属性、animateTransform 通过驱使元素形变来达成元素的运动效果，它们各有自己的规矩，元素的运动不能随心所欲控制运动路线。现在，重量级的 animateMotion 动画出场了，它给运动对象即要运动的svg元素以运动的路径，运动元素（例如上例的小矩形）就会沿着该路径运动。

我们先来看看上述例子的代码结构：

<svg ...>
	<rect x="-5" y="-5" width="10" height="10" fill="navy">
		<animateMotion ...></animateMotion>
	</rect>
</svg>

上面的代码并不能运行，展现它只是为了帮助我们（加深）理解svg动画的代码结构。看得出来：animateMotion动画的代码包裹在矩形（rect）元素代码之内，是rect元素的子元素，然后它从里面驱动矩形，相当于是矩形运动的发动机。这与前面介绍的animate和animateTransform动画一样。理解了这个，我们可以看看上例的完整代码：

<svg width="400" height="200" viewBox="0 0 200 100" style="border: 1px solid gray;">
	<rect x="-5" y="-5" width="10" height="10" fill="navy">
		<animateMotion
			path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z"
			dur="8s" /* 周期运动时长 */
			repeatCount="1" /* 重复次数 */
			rotate="auto" /* 是否转身 ：auto=自动转身  */
			begin="0s;mouseover" /* 触发动画 0s＝马上，mouseover=鼠标滑过 */
			restart="whenNotActive" /* 重启动画方式 ：动画不运行时*/
			fill="freeze" /* 动画结束时状态 ：freeze=结束时的状态 */
		></animateMotion>
	</rect>
</svg>

第四行，即第一个红色代码行，path 属性提供运动路径，这是animateMotion动画的核心所在：必须得有一个路径。路径可以是任意的，只要合法、有效。路径可以是闭合的（末尾带Z或z），也可以是非闭合的。rotate 属性用于控制元素运动时“身体”的转动状态，设为 auto 表示自动转动，如此，运动对象会智能地感知运动路线当下的朝向，自动调整“身体”以保持自己的朝向与路径的朝向一致，这个本事是专业模特的基本功之一（上面的示例中，可以勾选底部的复选按钮切换是否自动转身）。其他属性和之前介绍的一样，可以看上述代码的注释逐一理解。