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

css+svg动态绘制四叶草

<p>下面的代码使用svg的path路径绘制四叶草，路径由四个三次贝塞尔曲线拼凑而成，简洁而高效。路径动画通过两个CSS动画驱动，一个绘制、另一个擦除，动画的衔接由JS控制，两个动画间的时间间隔为两秒。CSS @keyframes动画设计的关键点在于 stroke-dashoffset 的准确取值，最大偏移量数值的确定可以在绘制好路径后使用 path.getTotalLength() 语句计算。</p>
<div class="hE"><pre id="prebox">
&lt;style&gt;
#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; }
}
&lt;/style&gt;

&lt;svg width="400" height="400" fill="none"&gt;
        &lt;line x1="0" y1="50%" x2="100%" y2="50%" stroke="silver" /&gt;
        &lt;line x1="50%" y1="0" x2="50%" y2="100%" stroke="silver" /&gt;
        &lt;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" /&gt;
&lt;/svg&gt;

&lt;script&gt;
var drawing = true;
clover.onanimationend = () =&gt; {
        setTimeout (() =&gt; {
                clover.style.animationName = ['draw','erase'][+drawing];
                drawing = !drawing;
        }, 2000);
};
&lt;/script&gt;
</pre></div>
<p>效果：</p>
<div id="showbox"></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);

var runCodes = (str,ele) => {
        let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
        let js_str, html_str;
        if(str.match(reg) !== null) {
                js_str = str.match(reg);
                html_str = str.replace(js_str, '').trim();
                js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
        } else {
                js_str = '';
                html_str = str.trim();
        }
        ele.innerHTML = html_str;
        let myfunc = new Function(js_str);
        myfunc();
};

runCodes(prebox.innerText, showbox);
</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

谢谢老师辛苦，早上好！{:4_187:}

马黑黑 发表于 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 指令，则使用上一个绘制的终点作为新曲线的起点。

起个网名好难 发表于 2024-10-4 08:55

很巧妙！

红影 发表于 2024-10-4 09:32

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

stroke-dashoffset 最大值就是路径的总长度，当此属性的偏移量达到路径的总长度，等于描边线完全偏 ...

这个路径的总长度没看懂怎么找，按F12然后找控制台？什么也没看出来啊{:4_173:}

红影 发表于 2024-10-4 09:44

哦，我找到了，那个总长度是1478.1624755859375

好神奇，控制台还有这样的作用{:4_187:}

马黑黑 发表于 2024-10-4 09:56

红影 发表于 2024-10-4 09:44
哦，我找到了，那个总长度是1478.1624755859375

好神奇，控制台还有这样的作用

这回懂得用 F12 了吧？有错误打红叉，你要他输出什么 console.log("OK?") 它就在那里输出什么

红影 发表于 2024-10-4 10:03

比如我画个胖点的，就是1566.7618408203125，我取了1567
<br><br>
<style>
#clover1 {
        fill: none;
        stroke: blue;
        stroke-width: 2;
        stroke-dasharray: 1567;
        animation: draw 10s linear forwards;
}
@keyframes draw {
        from { stroke-dashoffset: 1567; }
        to { stroke-dashoffset: 0; }
}
@keyframes erase {
        from { stroke-dashoffset: 0; }
        to { stroke-dashoffset: 1567; }
}
</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="clover1" d="M200 200 C20 0,380 0,200 200 C20 400,380 400,200 200 C0 20,0 380,200 200

C400 20,400 380,200 200" />
</svg>

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

红影 发表于 2024-10-4 10:11

马黑黑 发表于 2024-10-4 09:56
这回懂得用 F12 了吧？有错误打红叉，你要他输出什么 console.log("OK?") 它就在那里输出什么

是的，不过要先设置允许粘贴，然后就可以用粘贴的方式得到数值了，真方便{:4_173:}

红影 发表于 2024-10-4 10:16

我又试了个更瘦点的，忘记去修改成1397的距离，走起来也挺好。
看起来距离只要大于这个路径长度就可以呗？我试过小于这个值是不行的。

花飞飞 发表于 2024-10-5 09:25

代码写的完美动画，经过计算后的轨迹美得惊人。。。
能想出来已是神奇，能做出来更是神奇。。强悍的脑力劳动

马黑黑 发表于 2024-10-5 11:18

花飞飞 发表于 2024-10-5 09:25
代码写的完美动画，经过计算后的轨迹美得惊人。。。
能想出来已是神奇，能做出来更是神奇。。强悍的脑力劳 ...

吃猪脑吃多的{:4_170:}

马黑黑 发表于 2024-10-5 11:18

红影 发表于 2024-10-4 10:16
我又试了个更瘦点的，忘记去修改成1397的距离，走起来也挺好。
看起来距离只要大于这个路径长度就可以呗？ ...

实践出真知

马黑黑 发表于 2024-10-5 11:18

红影 发表于 2024-10-4 10:11
是的，不过要先设置允许粘贴，然后就可以用粘贴的方式得到数值了，真方便

终于学会了

花飞飞 发表于 2024-10-5 12:01

马黑黑 发表于 2024-10-5 11:18
吃猪脑吃多的

{:4_173:}辣甜的效果更好

马黑黑 发表于 2024-10-5 12:29

花飞飞 发表于 2024-10-5 12:01
辣甜的效果更好

也有人放糖的

红影 发表于 2024-10-5 13:49

马黑黑 发表于 2024-10-5 11:18
实践出真知

试试看效果，理解得更快点{:4_173:}

红影 发表于 2024-10-5 13:50

马黑黑 发表于 2024-10-5 11:18
终于学会了

现在知道F12的用法之一了，谢谢黑黑{:4_187:}

花飞飞 发表于 2024-10-5 21:25

马黑黑 发表于 2024-10-5 12:29
也有人放糖的

{:4_170:}想象一下，大约是升级版豆花。。。保留想法。。
有点理解你看到榴莲是什么感觉了
页: [1] 2
查看完整版本: css+svg动态绘制四叶草