css+svg动态绘制四叶草

马黑黑 · 发表于 2024-10-4 08:07

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

下面的代码使用svg的path路径绘制四叶草，路径由四个三次贝塞尔曲线拼凑而成，简洁而高效。路径动画通过两个CSS动画驱动，一个绘制、另一个擦除，动画的衔接由JS控制，两个动画间的时间间隔为两秒。CSS @keyframes动画设计的关键点在于 stroke-dashoffset 的准确取值，最大偏移量数值的确定可以在绘制好路径后使用 path.getTotalLength() 语句计算。

<style>
#clover {
	fill: none;
	stroke: green;
	stroke-width: 2;
	stroke-dasharray: 1478;
	animation: draw 10s linear forwards;
}
@keyframes draw {
	from { stroke-dashoffset: 1478; }
	to { stroke-dashoffset: 0; }
}
@keyframes erase {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: 1478; }
}
</style>

<svg width="400" height="400" fill="none">
	<line x1="0" y1="50%" x2="100%" y2="50%" stroke="silver" />
	<line x1="50%" y1="0" x2="50%" y2="100%" stroke="silver" />
	<path id="clover" d="M200 200 C50 0,350 0,200 200 C50 400,350 400,200 200 C0 50,0 350,200 200 C400 50,400 350,200 200" />
</svg>

<script>
var drawing = true;
clover.onanimationend = () => {
	setTimeout (() => {
		clover.style.animationName = ['draw','erase'][+drawing];
		drawing = !drawing;
	}, 2000);
};
</script>

效果：

马黑黑 · 发表于 2024-10-4 08:21

ps：

stroke-dashoffset 最大值就是路径的总长度，当此属性的偏移量达到路径的总长度，等于描边线完全偏离了路径，看不见了，等于0时描边线就在原位。

path.getTotalLength() 方法可以获取 path 路径的长度，例如 path 的 id="path1"，我们可以这样在JS中拿到它的总长度：

console.log(path1.getTotalLength());

按F12，在侧边栏（一般在右侧，也可以设置为在其他地方）的控制台可以看到路径的值。

控制台是浏览器 DevTools 组件之一。DevTools是一个工具集合，控制台只是一个组成成员，它上面会提示当前页面的相关信息。

梦江南 · 发表于 2024-10-4 08:26

谢谢老师辛苦，早上好！

马黑黑 · 发表于 2024-10-4 08:30

单个三次贝塞尔曲线 d 属性值解释：

d="M x0 y0 C cx1 cy1, cx2 cy2, x y"

M x0 y0 ：画笔移动到 (x0,y0)
C 是绘制三次贝塞尔曲线指令，6个参数，其中 cx1 cy1 是第一个控制点xy坐标，cx2 cy2 是第二个控制点xy坐标，x y 是曲线的终点。

曲线需要起点和终点，d属性值中，M 指令规定了曲线的起点，C指令的最后两个参数规定了曲线的终点。连着使用 C 指令继续绘制曲线，如果没有 M 指令，则使用上一个绘制的终点作为新曲线的起点。