白色戏法（测试自适应svg路径动画）

花飞飞

马黑黑 发表于 2025-9-1 21:24
两者实现手段不一样

本质太不一样了，
一个贴子看一个小时，
两个要看俩小时

花飞飞

马黑黑 发表于 2025-9-1 21:29
特别需要注意的是svg的 viewBox 设计，路径 d 属性依据它

svg的 viewBox 设计是个大咖。。。

花飞飞

马黑黑 发表于 2025-9-1 21:36
综合运作的效果：

（一）animateMotion 的相关属性有 dur（动画时长）、begin（何时开始），它们取值 ...

原来粒子属性全给随机值就可以有这么酷炫的效果。。。
这代码严谨的，如一台精密仪器一样，完美运行。。

马黑黑

红影 发表于 2025-9-1 21:38
这个动画是明暗变化的动画吧。
这个整个在背景范围里啊。
这个js设计感觉有点复杂，很多看着都觉得似是 ...

粒子动画分两种类型：CSS实现闪烁动画，SVG实现沿路径运动动画。

JS中，有一个函数 createSvgElement(元素，属性集合)，它负责创建一个可能带有很多属性的SVG子元素，其中参数 元素 指svg子元素（例如 circle、rect 等），属性集合 参数用二维数组表示，例如：

[
    ['width', 50],
    ['height', 40],
    ['fill', 'red']
];

也可以写成一行：[ ['width', 50], ['height', 40], ['fill', 'red'] ];

该函数返回所创建的元素。

然后就是使用这个函数，依次创建出下面的SVG子元素结构：

<use href="#ID“ x="x" y="y" style="...">
    <animateMotion ...>
        <mpath id="#mpathID" />
    </animateMotion>
</use>

并追加给 SVG 标签。

马黑黑

花飞飞 发表于 2025-9-1 21:46
原来粒子属性全给随机值就可以有这么酷炫的效果。。。
这代码严谨的，如一台精密仪器一样，完美运行。。

完美一说夸张了，过得去就好

马黑黑

花飞飞 发表于 2025-9-1 21:44
svg的 viewBox 设计是个大咖。。。

自适应主要靠它

马黑黑

花飞飞 发表于 2025-9-1 21:42
本质太不一样了，
一个贴子看一个小时，
两个要看俩小时

三个看三小时——都是属于自己的时间

花飞飞

马黑黑 发表于 2025-9-1 21:39
懂的用材料和工具，产品就可以生产出来

宇宙第一完美产品，效果太赞了。。
坦克飘上天，致敬93大阅兵
战斗民族血脉觉醒时刻。。

马黑黑

花飞飞 发表于 2025-9-1 21:41
小猪猪你设计这么可爱的小坦克，没满月就出来营业了，仔细看还真是的。。。吃一个。。

马黑黑

花飞飞 发表于 2025-9-1 21:49
宇宙第一完美产品，效果太赞了。。
坦克飘上天，致敬93大阅兵
战斗民族血脉觉醒时刻。。

马黑黑

花飞飞 发表于 2025-9-1 21:39
给跪了，这神仙算法，感觉我能看出一丢丢，CPU就快烧坏了。。。

开个通调降降温

红影

马黑黑 发表于 2025-9-1 21:36
这是小坦克，无人坦克

哈哈，这原来是坦克啊，是九三阅兵里要用到的么

红影

马黑黑 发表于 2025-9-1 21:47
粒子动画分两种类型：CSS实现闪烁动画，SVG实现沿路径运动动画。

JS中，有一个函数 createSvgElement( ...

这个创建SVG子元素的过程挺陌生的，被黑黑解说了好多了

花飞飞

马黑黑 发表于 2025-9-1 21:50
开个通调降降温

开空调就还得开个加湿器

花飞飞

马黑黑 发表于 2025-9-1 21:50

想打仗了。

花飞飞

马黑黑 发表于 2025-9-1 21:50

跟着乐一个快乐着你的快乐

花飞飞

马黑黑 发表于 2025-9-1 21:49
三个看三小时——都是属于自己的时间

看贴子是乐趣

花飞飞

马黑黑 发表于 2025-9-1 21:49
自适应主要靠它

劳苦功高的听着

花飞飞

马黑黑 发表于 2025-9-1 21:49
完美一说夸张了，过得去就好

少谦虚。。哪里不完美了。。

马黑黑

花飞飞 发表于 2025-9-1 22:52
少谦虚。。哪里不完美了。。

完美就是完了就美