本帖最后由 马黑黑 于 2022-9-10 13:10 编辑
将 animateMotion 所使用的路径写在自己代码内不是官方建议的方法,但在路径极简且无需反复调用路径时,可以考虑。官方建议 animateMotion 使用路径的方法是先设计路径,再使用 mpath 标签指定所使用的路径。以l类似一楼的直线路径为例,我们来看看如何实现:
<svg width="600" height="200" viewBox="0 0 600 200" style="border: 1px solid"> <path id="path1" d="M 50 100 H 530 z" stroke="red" /> <rect x="10" y="-20" width="50" height="40" fill="olive"> <animateMotion dur="8s" repeatCount="5"> <mpath xlink:href="#path1" /> </animateMotion> </rect> </svg>
mpath 以 animateMotion 的子标签出现,只负责为 animateMotion 指定前面设计的 path 路径。
在上面的例子里,矩形的 y 值为什么设定为 -20 即矩形的高度的一半?根据 rect 的(xy)坐标,当它处于静止状态时,它的位置又在哪里?又,当矩形根据 animateMotion 的设定投入运动中,它为什么在路径x线Y轴的正中央?为了展示这一点,这里将 animateMotion 的 repeatCount 设置为 5,运行 5 次后动画会停下来,然后可以理解:矩形的 xy坐标 的设置,当基于路径运动时应参照路径的某些情形(如初始path坐标或xy坐标中全部或某一个轴)进行设定,当矩形是静止展现时,则应以 svg 的左上角(0,0)做基点设定矩形的位置。
迄今为止,我们还没有令运动对象以曲线作为运动路径。这里,设计一条三次贝塞尔曲线,先看效果:
代码:
<svg width="600" height="200" viewBox="0 0 600 200" style="border: 1px solid"> <path id="path2" d="M 0 0 C 260 300, 400 20, 600 200" fill="none" stroke="red" /> <rect x="0" y="-20" width="50" height="40" fill="olive"> <animateMotion dur="3s" rotate="auto" repeatCount="indefinite"> <mpath xlink:href="#path2" /> </animateMotion> </rect> </svg>
蓝色代码,d="M 0 0 C 260 300, 400 20, 600 200",M 0 0 ,画笔起笔处也是曲线开始点的坐标,C 是三次贝塞尔曲线指令(CurveTo的缩写),所带的三组参数,最后一组是曲线的终点坐标,第一、第二组是两个控制点坐标。这个路径没有用小写字母 z 闭合,因为这条曲线闭合了构不成合理的运行轨道。
animateMotion 代码中还有一个重要的设置,rotate="auto",这是叫矩形能够根据路径自动调整“车身”的意思,没有这句,矩形行进的效果没那么好。 |