js+svg绘制多重动画六边形

马黑黑

在单个 svg path 路径六边形动画基础上加以改进：① 每一个 path 包裹之下的两个 animate 动画，begin 属性除第一组动画为 0s 即立即执行外，其余的动画均等上一个动画开始后加 1s 开始执行。② <user> 标签变为 6*6=36 个，6个一组，每一组对标一个路径；旋转分两种情形，1、3、5 按 60度*序号 获取角度值，2、4、6 按 60度*序号+30 获取角度值。以下是实现代码和演示效果、XML svg代码：

<svg id="hsvg" width="320" height="320" viewBox="0 0 320 320" fill="none" stroke="#008000" stroke-linecap="round"></svg>

<script>
drawHexagon = (total) => {
	let pathstr = '\n\t<defs>', usestr = '';
	Array(total).fill(0).forEach((id,idx) => {
		id = idx + 1;
		let bstr = idx === 0 ? '0s' : `p1.begin+${idx}s`;
		pathstr += `
		<path id="r${id}">
			<animate id="p${id}" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite" begin="${bstr}"/>
			<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite" begin="${bstr}"/>
		</path>`;
		Array(total).fill(0).forEach((u,k) => {
			u = k + 1;
			let angle = id % 2 === 0 ? 360 / total * k + 30 : 360 / total * k;
			usestr += `\n\t<use xlink:href="#r${id}" transform="rotate(${angle} 160 160)"></use>`;
		});
	});
	pathstr += '\n\t</defs>\n';
	return pathstr + usestr + '\n';
};

hsvg.innerHTML = drawHexagon(6);
</script>

点击查看效果

XML代码：

梦江南

谢谢老师分享！辛苦了！

红影

“除第一组动画为 0s 即立即执行外，其余的动画均等上一个动画开始后加 1s 开始执行”
这个还需要把时间算好，然后就变成连绵不绝的绽放了呢

红影

看帖子里，好像是全部画完了才开始旋转的，原来画这个动态图也需要点时间的。

红影

let angle = id % 2 === 0 ? 360 / total * k + 30 : 360 / total * k;
简单地就分出了135和246

马黑黑

红影 发表于 2024-9-12 16:17
let angle = id % 2 === 0 ? 360 / total * k + 30 : 360 / total * k;
简单地就分出了135和246

公式是有必要的：万一改变了总数，不用去重新计算

马黑黑

红影 发表于 2024-9-12 16:08
看帖子里，好像是全部画完了才开始旋转的，原来画这个动态图也需要点时间的。

不是酱紫理解的，这个绘制所需时间我们是感觉不到的。你的错觉原因是：线条粗细实际上开始时是0，看不见，它慢慢变大，达到一定程度才看见。然后线条粗细有往小里变。

红影

马黑黑 发表于 2024-9-12 18:31
公式是有必要的：万一改变了总数，不用去重新计算

是的，这个无论总数多少，都直接判断了奇偶。

红影

马黑黑 发表于 2024-9-12 18:33
不是酱紫理解的，这个绘制所需时间我们是感觉不到的。你的错觉原因是：线条粗细实际上开始时是0，看不见 ...

哦，原来是这样变化带来的错觉，还以为是绘制导致的

马黑黑

红影 发表于 2024-9-12 20:18
是的，这个无论总数多少，都直接判断了奇偶。

对的

马黑黑

红影 发表于 2024-9-12 20:19
哦，原来是这样变化带来的错觉，还以为是绘制导致的

绘制这么简单的东东根本不需要时间

红影

马黑黑 发表于 2024-9-12 20:19
对的

厉害了

红影

马黑黑 发表于 2024-9-12 20:20
绘制这么简单的东东根本不需要时间

就算需要，也是人感受不到的一刹那。

马黑黑

红影 发表于 2024-9-12 21:07
就算需要，也是人感受不到的一刹那。

是的。

大数据运算会耗时间。比方说求素数，在四位数级别上完成，那会感觉不到花多少时间，但是，设定的范围越广，所花的时间就会感知得到，甚至会很漫长。当前，有很多计算机参与到求素数的行列中来，现在一年中可能也找不到下一个最大的素数。

红影

马黑黑 发表于 2024-9-12 22:14
是的。

大数据运算会耗时间。比方说求素数，在四位数级别上完成，那会感觉不到花多少时间，但是，设定 ...

计算机速度那么快，在一年中都找不到下一个素数之最，这个浩渺得太无法想象了。