评论资讯 [ 总 208 则 ]
·飞飞 - 2024-9-18 20:25
·悄然 - 2024-9-18 20:23
·飞飞 - 2024-9-18 20:17
·悄然 - 2024-9-18 20:12
·知名不具 - 2024-9-17 23:34
·知名不具 - 2024-9-17 23:32
·知名不具 - 2024-9-17 23:31
·知名不具 - 2024-9-17 23:29
·知名不具 - 2024-9-17 23:28
·知名不具 - 2024-9-17 23:27
·悄然 - 2024-9-18 20:23
·飞飞 - 2024-9-18 20:17
·悄然 - 2024-9-18 20:12
·知名不具 - 2024-9-17 23:34
·知名不具 - 2024-9-17 23:32
·知名不具 - 2024-9-17 23:31
·知名不具 - 2024-9-17 23:29
·知名不具 - 2024-9-17 23:28
·知名不具 - 2024-9-17 23:27
友情链接
网站统计
js+svg绘制动画六边形
实现原理：① 使用 path 路径绘制一个 ^ 形状的图案，path图案的 d 属性通过动画标签 <animate></animate> 以 values 多值的形式动态设置路径图案动画，令 ^ 图案向上移动直至消失，同时同步运行另一个 animate 动画，令图像线条按粗细 0;4;4;4;0 进行循环变化。共创建六组这样的path动画，使用 <defs></def> 标签包裹起来留待后续引用。② 创建六组 <user/> 标签，每一组对标一个 ^ path图案，依次从 0~360 度均分旋转形成六边形的六个大角，构成最终效果。这里，defs 标签群负责描述路径动画，user 标签群负责呈现结果；如果使用XML来写svg代码，代码量会很大，因此使用JS来快捷生成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 = '\n';
Array(total).fill(0).forEach((id,idx) => {
id = idx + 1;
pathstr += `\n\t\t<path id="r${id}">\n\t\t\t<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"/>\n\t\t\t<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite" begin="0s"/>\n\t\t</path>`;
usestr += `\t<use xlink:href="#r${id}" transform="rotate(${360 / total * idx} 160 160)"/>\n`
});
pathstr += '\n\t</defs>\n';
return pathstr + usestr;
};
hsvg.innerHTML = drawHexagon(6);
</script>
XML代码：
前一篇: 拖曳元素（二）
下一篇: js+svg绘制多重动画六边形
发表评论:
评论列表 [2条]
#2 | 飞飞 于 2024-9-11 20:09 发布: 看了一下，太烧脑，已劝退。。。溜了溜了。。
#1 | 抄个说明 于 2024-9-11 20:07 发布: 如果需要像隐喻一帖的动画效果，那么，需要做更多的工作：animate动画的 begin 属性指向上一个动画结束；use标签总数要乘以6
