马黑黑 发表于 2025-9-1 21:24
两者实现手段不一样
本质太不一样了，
一个贴子看一个小时，
两个要看俩小时{:4_170:}
马黑黑 发表于 2025-9-1 21:29
特别需要注意的是svg的 viewBox 设计，路径 d 属性依据它
{:4_199:}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大阅兵{:4_170:}
战斗民族血脉觉醒时刻。。
花飞飞 发表于 2025-9-1 21:41
小猪猪你设计这么可爱的小坦克，没满月就出来营业了，仔细看还真是的。。。吃一个。。
{:4_172:}
花飞飞 发表于 2025-9-1 21:49
宇宙第一完美产品，效果太赞了。。
坦克飘上天，致敬93大阅兵
战斗民族血脉觉醒时刻。。
{:4_181:}
花飞飞 发表于 2025-9-1 21:39
给跪了，这神仙算法，感觉我能看出一丢丢，CPU就快烧坏了。。。
开个通调降降温
马黑黑 发表于 2025-9-1 21:36
这是小坦克，无人坦克
哈哈，这原来是坦克啊，是九三阅兵里要用到的么{:4_173:}
马黑黑 发表于 2025-9-1 21:47
粒子动画分两种类型：CSS实现闪烁动画，SVG实现沿路径运动动画。
JS中，有一个函数 createSvgElement( ...
这个创建SVG子元素的过程挺陌生的，被黑黑解说了好多了{:4_187:}
马黑黑 发表于 2025-9-1 21:50
开个通调降降温
开空调就还得开个加湿器
马黑黑 发表于 2025-9-1 21:50
想打仗了。{:4_173:}
马黑黑 发表于 2025-9-1 21:50
跟着乐一个{:4_173:}快乐着你的快乐
马黑黑 发表于 2025-9-1 21:49
三个看三小时——都是属于自己的时间
{:4_173:}看贴子是乐趣
马黑黑 发表于 2025-9-1 21:49
自适应主要靠它
劳苦功高的听着{:4_173:}
马黑黑 发表于 2025-9-1 21:49
完美一说夸张了，过得去就好
{:4_196:}少谦虚。。哪里不完美了。。
花飞飞 发表于 2025-9-1 22:52
少谦虚。。哪里不完美了。。
完美就是完了就美{:4_170:}