svg动画：自己触发自己

马黑黑

以下代码在svg里绘制一个圆，<circle>标签里包含一个animate动画，该动画会令其父元素按动画标签所描述的方式运动。下面是代码和效果演示：

<svg width="600" height="150" style="border:1px solid gray;fill:steelblue;stroke: none">
	<circle cx="50" cy="75" r="30">
		<animate
			attributename="cx"
			values="50;550;50"
			dur="6s"
			begin="0s;m1.end"
			id="m1"
		/>
	</circle>
</svg>

点击查看效果

动画代码解释：3~9行代码我们分行写以便可以更好地观察理解。下面是动画代码说明——

第4行：指定 animate 动画要改变的 circle 标签属性 cx，即圆心水平方向位置；
第5行：values 属性可以替代 from 和 to/by 属性，值至少包含两组用于描述运动的数值，各组数值间用分号隔开。这里，令圆心 cx 坐标从50（像素）出发，移动到550，再移动到原点50；
第6行：一个运动周期的时长，6秒；
第7行：begin 属性用来触发动画，支持多值，值间用分号隔开。0s 表示0秒开始运行动画，即页面一打开就运行，m1.end 表示，id="m1" 的动画结束（end）时触发；
第8行：给 animate 动画标签赋予 id 标识。这里请特别留意第7行代码的动画触发条件之一：自身运行结束。

本例没有设置repeatCount="indefinite"却能永动运行动画，关键点在代码7、8行。

花飞飞

设置了6秒结束时就是开始时，所以就永动了

花飞飞

代码在白老师手里就是出神入化，总有无限多的创意

花飞飞

SVG知 识点多多。。

红影

它的出发条件是m1.end，而它自身又是m1 ，所以变成永动了？

红影

这个其实并不是很好理解，但它就那么实实在在地实现了

红影

style="border:1px solid gray;fill:steelblue;stroke: none"
这个也挺奇怪，边框是给svg的，颜色是给里面的圆的。

马黑黑

红影 发表于 2024-9-13 20:54
style="border:1px solid gray;fill:steelblue;stroke: none"
这个也挺奇怪，边框是给svg的，颜色是给里面 ...

svg很多属性可以用在CSS里面，stroke，fill等，这点比canvas画布强。

马黑黑

花飞飞 发表于 2024-9-13 20:24
设置了6秒结束时就是开始时，所以就永动了

严格讲不是6秒，是自己的动画结束再触发，你设计3秒0.5秒都一样

马黑黑

红影 发表于 2024-9-13 20:50
这个其实并不是很好理解，但它就那么实实在在地实现了

应该是好理解的：自己动画结束了再次触发动画

马黑黑

花飞飞 发表于 2024-9-13 20:25
代码在白老师手里就是出神入化，总有无限多的创意

果酱了

马黑黑

花飞飞 发表于 2024-9-13 20:25
SVG知 识点多多。。

svg琐碎，但它的知识体系是简洁的

小辣椒

不懂~~~就先看看代码

马黑黑

小辣椒 发表于 2024-9-13 22:00
不懂~~~就先看看代码

svg有自己的一整套标签和标签属性

红影

马黑黑 发表于 2024-9-13 21:29
svg很多属性可以用在CSS里面，stroke，fill等，这点比canvas画布强。

哦，这个倒是方便了呢。

红影

马黑黑 发表于 2024-9-13 21:30
应该是好理解的：自己动画结束了再次触发动画

跟小猫抓自己尾巴似的呗

樵歌

加分分。肯定成果！

马黑黑

樵歌 发表于 2024-9-14 07:10
加分分。肯定成果！

马黑黑

红影 发表于 2024-9-13 23:00
跟小猫抓自己尾巴似的呗

嗯，很像

小辣椒

马黑黑 发表于 2024-9-13 22:51
svg有自己的一整套标签和标签属性

还有一整套，那我都不懂的了