请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2023-12-13 09:37 编辑
svg之 animateMotion 路径动画(二)
本节,先讲讲 <animateMotion> 元素的 mpath 子元素,它使 <animateMotion> 元素能够引用一个外部的元素作为运动路径的定义。如此,animateMotion的path属性可以休息,将路径定义的工作交由animateMotion的子元素 mpath 负责。以下效果与上节(一)的示例完全一样,只是,你从后面提供的代码中可以发现,我们用了 mpath 子元素来描述运动路径,而外部路径我们用淡蓝色做了填充:
上面的代码我尝试采用 ol+li 即有序列表实现带行号的代码展现机制,长代码行不好再人工折行(但它会根据浏览器的宽度尺寸自动折行),给阅读带来一定困扰。为方便理解 mpath 子元素,我将上述代码抽离出主干结构,可对照上述代码加以理解:
<svg>
<path id="mypath">
<rect>
<animateMotion>
<mpath xlink:href="#mypath"></mpath>
</animateMotion>
</rect>
</svg>
mpath的作用和animateMotion中的path属性一样,都是为animateMotion指定运动路径。由于路径可能很长,所以svg的开发者创建了mpath子元素,用于避免元素的属性表达过长的现象。
接下来我们讲讲动画标签与驱动对象标签的代码分离。animateMotion 和 animate、animateTransform 一样,标签可以游离于运动对象即元素之外,通过元素的 id 来识别并对之驱动。代码结构举例如下:
<svg>
<path id="mypath">
<rect id="rectbox"></rect>
<animateMotion xlink:href="#rectbox">
<mpath xlink:href="#mypath"></mpath>
</animateMotion>
</svg>
上述结构性的代码,我们首先给矩形 rect 赋予一个 id,然后在 animateMotion 代码内部加一个 xlink:href 属性,其属性值指向矩形 id。这里,id 与 animateMotion 子元素 mpath 没有直接关系,它具体负责的仅是路径,它的 xlink:href 属性指向路径 id。
最后,我们用上述结构改造一下本节开头给出的示例代码,请看效果和代码:
|